webフォントのアイコン[Font Awesome]
アイコン画像の代替にフォントを使いたい！そんな要望に答えるのがこの「Font Awesome」
【PR】GoogleストアでPixelに使える10%オフクーポン
![[期間限定]Googleストアで使えるGoogle Pixel 10%割引クーポンコード配布[2025年6月30日まで]](https://securavita.net/blog/wp-content/uploads/2024/05/google-pixel-8a-01-200x200.jpg){kind=tracking}
[期間限定]Googleストアで使えるGoogle Pixel 10%割引クーポンコード配布[2025年6月30日まで]Secura Vita (2025/04/30)
1）設置方法
設置方法は至ってシンプル
htmlに以下のソースを記述するのみ！ ファイルのダウンロードは必要ありません。
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
2)表示方法
表示方法も超シンプル！
以下のソースのように記述します。
<i class="fa fa-home"></i> //例 このサイトの<i class="fa fa-home"></i><a href="/">ホーム</a>へ戻る
するとこの用に表示されます。
[このサイトのホームへ戻る]
これはフォントなのでcssで色々と変更可能です。
・色を変える：
・大きさを変える：
3)フォントの種類
フォントの種類はこちらのページで確認できます。
使用したいアイコンもキーワードで検索（英語）できます。
適当に並べてみました。
まだまだいっぱいあります！
これを使えばhtml,cssのみで行うデザインにも幅が出るかなと思います。
是非一度お試しあれ！