簡単便利！Font Awesomeの使い方
Font Awesomeとは
ウェブサイトやブログでアイコンをテキストのように扱うことができるサービスです。
テキストと同じような扱いなので、拡大・縮小をしても画質が悪くなることがありませんし、カラーチェンジも簡単にできます。
使用例)
Font Awesomeの導入方法
導入方法はサーバーにデータをアップロードする用法とCDNを使用する方法がありますが、今回は簡単に設置できるCDNを使用する方法をご紹介します。
CDNとは既に専用のサーバーなどに上がっているデータを読み込んで自分のウェブサイトに表示させる仕組みです。
自分のサーバーに新しくデータをアップロードする必要が無いので、自分のサーバーへの負荷をなくすことができます。
また、フォントが新しく追加された時もダウンロードし直す必要がありません。
設置方法も簡単なので、個人的にはこちらの方法がオススメです。
ステップ1：以下のコードをコピーする
|
1 |
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> |
念のため、最新のコードをBootstrapCDNで確認することをおすすめします。
ステップ2：コピーしたコードをhead内に貼り付ける
コピーしたコードを自分のウェブサイトやブログの<head>~</head>の中に貼り付けます。
Font Awesomeの使い方
ステップ1：フォントを選ぶ
Font Awesome公式サイト(アイコン選択画面)
Font Awesome公式サイトのアイコン一覧ページから使用したいアイコンを選びます。
その際検索ボックスも使えますが、英語での検索となります。
ステップ2：フォントコードをコピーする
Font Awesome公式サイト(アイコン詳細画面)
アイコンのフォントコードをコピーします。
ステップ3：アイコンを表示したい場所に貼り付ける
|
1 |
<p><i class="fa fa-address-book" aria-hidden="true"></i> ←アイコンが表示されます</p> |
表示例)
←アイコンが表示されます
