WEBサイトを運営されている方であれば、こんな雰囲気のアイコンを目にしたことがあることがあると思います。これは「Font Awesome」というものを利用して表示しているアイコンです。これを自分の好きなところに挿入する方法を解説していきます。
スポンサーリンクFont Awesome の導入
最初にFont AwesomeのCSSファイルなどをここからダウンロードして、サーバーにアップロードします。このとき、cssフォルダとfontフォルダがありますが、この2つのフォルダが同じ階層になるようにアップロードしてください。
次に、導入したいHTMLページのhead部分に、先ほどダウンロードしたfont-awesome.cssを読み込む記述を入れます。
<link href="/css/font-awesome.min.css" rel="stylesheet">
など。font-awesome.min.cssへのパスは、ご利用の環境に合わせてください。
以上で導入は完了です。
挿入したいアイコンを見つける
次に、ここから好きなアイコンを見つけます。今回はこれを例にとって書いていきます。
アイコンのページを開くと、
<img class="alignnone size-medium wp-image-228" src="https://tanidaiz.com/wp-content/uploads/2017/10/car-300x251.png" alt="" width="300" height="251" />
HTMLが書いてあります。これを適当なところにコピペすると、この車のアイコンが表示されます！
スポンサーリンク複数の要素の前後にアイコンを表示する
以上の方法で、好きな場所に好きなアイコンを表示することができるようになりましたが、もう少し賢く、全てのli要素の直前にアイコンを表示したり、'icon'クラスをもつ、全ての要素の直後にアイコンを表示したりする方法を書いていきたいと思います。
例えば、車のアイコンを、全てのli要素の直前に表示したいということにします。先ほどの画像の中に、'fa'と'fa-car'というクラスがあるのがわかると思います。このうち'fa'ではない方の'fa-car'をコピーします。
次に、このcssファイルを開きます。ここで先ほどの'fa-car'で検索をかけます。すると、
.fa-car:before{content:"なにがし"}
という記述がどこかに存在します。この「なにがし」の部分をコピーします。車の場合、f1b9となっています。
次に、サイトのCSSファイルを開きます。そして、直前または直後にアイコンを表示したい要素を、いつものCSSのセレクタの感覚で指定します。その次に、アイコンを直前に入れたい場合は:before、直後に入れたい場合は:afterをセレクタに追加します。全てのli要素の直前にアイコンを入れたい場合は、
li:before
となります。あとは、{}の中に、
content: "なにがし";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
を入れます。
全てのli要素の直後に車のアイコンを入れるCSSの完成形は
li:before{
content: "f1b9";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
}
となります。これは疑似要素を用いて、アイコンを挿入しています。
こんなに簡単にアイコンを挿入できるのは素晴らしいですね。ありがたく使って行きましょう。
ありがとうございました。