アイコンのウェブフォントを設置する
今回はアイコンのwebフォントを設置する方法についてみていきます。
画像ではなくてwebフォントでアイコンを設置するメリットは
・テキストとのベースラインをあわせやすい
などがあげられます。
アイコンのwebフォントを配布しているサービスはいくつかあるのですが、今回はFont Awesomeを使ったアイコンの設置方法を紹介していきます。
Font Awesomeのサイトには下のリンクからいくことができます。
Font Awesome
ダウンロードする
サイトに行くとこのような画面になるのでDownloadをクリックします。
クリックするとこちらの画面がでてくるので「No thanks,just download Font Awesome」をおします。そうするとダウンロードが開始されます。
ダウンロードしたデータの中身はこのようになっています。
実際に使うのはfontフォルダとcssフォルダになります。
まず、fontフォルダを反映させたいフォルダの任意の場所にコピーします。
つづいてcssファイルの中にあるfont-awesome.cssもしくはfont-awesome.min.cssのどちらかを反映させたいフォルダの任意の場所にコピーします。
これで下準備は完了です。
htmlにcssを読み込ませる
次にhtmlにfont-awesome.min.cssのcssを読み込ませます。
<head> <link rel="stylesheet" type="text/css" href="css/styles.css"> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> </head>
使いたいアイコンをFont Awesomeから探す
Font Awesomeのナビゲーションからiconをクリックします。
するとアイコンの一覧が出てくるので使いたいアイコンを探してクリックします。
今回はfa-bell-oのアイコンを選びました。
アイコンをクリックするとこの画面になります。
コードが書かれているところがあるのでそれをコピーしてhtmlのアイコンを反映させたい場所にペーストします。
<p>この文字の隣にベルのアイコンを表示させたい<i class="fa fa-bell-o" aria-hidden="true"></i></p>
すると
この文字の隣にベルのアイコンを表示させたい
このように文章の隣にベルが反映されます。
上では太い赤字にするように設定していますが、きちんとそれも反映されていることがわかります。
