Webでは、自分で作成したり調達せずとも無料で利用できる素材がたくさんあります。
Webアイコンフォントもその一つです。
今回はWebアイコンフォントの中でも有名なFont Awesomeの導入手順と使い方をまとめました。
アイコンを入れると、それだけでぐっとWebサイトが華やかになるのでいいですよね。
自分で画像として作成するとけっこう手間かかるので、まずFont Awesomeに使いたいアイコンがないか探してみましょう。
Webアイコンフォントとは？
かつてはアイコンをWebサイトに表示したいなら、画像を挿入するのが主流でした。でも、拡大したらぼやけてしまったり、アップロードする手間がめんどくさいです。
Webアイコンフォントは、Web上の文字と同じようにWebサイト上に表示できるアイコンです。
文字と同じようにCSSでfont-sizeやcolorを指定してあげればサイズや色を変えることができます。画像のようにぼやけません。
画像だと色違いの素材を複数用意したり、画像サイズに配慮したりと色々と面倒なことがありましたが、Webアイコンフォントを利用すればもっと手軽にアイコンを表示できるというわけです。
Font Awesomeとは
Webアイコンフォントを無料で利用できる最も有名なサービスがFont Awesomeです。
多くのWebサイトでFont Awesomeのアイコンが使われています。Font Awesomeの公式サイトのアイコン一覧をのぞいてみれば、「あ～見たことある」ってなるはずです。
つい最近、最新バージョンFont Awesome5が発表されました。
旧バージョンであるFont Awesome4もこれまで通り利用することができます。
個人的にはFont Awesome4が使いやすいな、と思っているのでここでは4についてまとめています。
後々他の記事で5についてもまとめたいと思います。
Font Awesomeをサイトに導入する準備
Font Awesomeを利用するには2つの方法があります。
CDN
CDNはかんたんに説明すると、画像やフォントなどのデータを他のサーバーから呼び出すことでそれらのデータを自分のサイトに表示させる仕組みです。
つまり、自分のサーバにわざわざデータをアップロードせずとも、Webサイトに画像やフォントを表示させることができるわけです。
アップロードする手間が省けてお手軽なのでこちらの方法がおすすめ。
以下のコードをHTMLファイルのHTMLファイルのhead要素内にコピーペーストします。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
WordPressの場合は、管理画面にて[外観]→[テーマの編集]を開き、右側バーのファイル一覧からheader.phpやhead.phpというファイルを探してください。その中にHTMLのhead要素があるはずです。
子テーマを適用している場合は、見当たらないかもしれません。その時は親テーマのファイル群をのぞいてください。
自分のサーバにアップロード
Font Awesomeからフォントデータをダウンロードして自分のサーバにアップロードする方法です。特にこだわりがなければCDNをおすすめします。
Font Awesomeを使ってみよう
さて、導入準備が終わったらさっそくアイコンフォントを表示させてみます。
まずはFont Awesome4の公式サイトにアクセスしてアイコンを見てみましょう。
トップページにアクセスしたらメニューから[icons]をクリックします。
https://fontawesome.com/v4.7.0/
すると、アイコン一覧ページに飛びます。
たくさんのアイコンがありますね。
ここから使いたいアイコンを選びます。
たとえば、「文章の前にチェックマークなんかあったらいいな～」なんて思ったとします。
「check」というドンピシャなアイコンがあったのでクリックします。
checkアイコンのページが表示されました。
HTMLのコードが記載されているので、これをコピーします。
あとはこれを表示させたいテキストの前にペーストします。
<i class="fa fa-check" aria-hidden="true"></i>するとWebページではこのように表示されます。
テキスト
直接HTMLタグとして埋め込みましたが、CSSで表示させることも可能です。
一緒に色やフォントサイズの説明もしていきますね。
CSSでアイコンフォントを表示
CSSで表示させる場合には、先程のアイコンページでunicodeというところを見ます。
この「f00c」というのが、checkアイコンをCSSで表示させるためのコードになります。
さて、このコードをどうやってCSSに指定するのか。
CSSでアイコンフォントを表示するには、疑似要素(beforeとafter)を使います。
要素の前に入れるbeforeと、後に入れるafterがありますが、今回はテキストの前にアイコンを入れたいのでbeforeを使います。
わからない方は難しく考えないように。
ただ、「テキストや行などの要素の前に要素を入れるよ～」ってだけです。
.check:before {
font-family: FontAwesome;
content: '\f00c';
}<span class="check">テキスト</span>font-family: FontAwesome;
font awesomeを使うよっていう明示です。
content: '\f00c';
アイコンの種類を指定します。ダブルコーテーション(” “)、もしくはシングルコーテーション(‘ ‘)で必ず囲うこと。バックスラッシュを忘れないこと。
どちらも記述しないとアイコンは表示されませんので必ず記述します。
さて、これに続いて色やサイズの指定をしてみましょう。
.check:before{
font-family: FontAwesome;
content: '\f00c';
font-size: 20px; /*アイコンのサイズを変える*/
color: #ffb833; /*アイコンの色を変える*/
}font-size: 20px;
フォントサイズを変える指定です。フォントと同じように大きさを変えることができます。
color: #ffb833;
アイコンの色を変えます。
この#ffb833はカラーコードといって、色をWebページで表示するためのコードです。色ごとに決まっているので好みの色のカラーコードを入れましょう。
▼カラーコードのサイトはこちら
https://www.colordic.org/
Font AwesomeはWebデザインの手助けになる
Font Awesomeを知らなかった時は、無料アイコン素材サイトにお世話になったり、自分で頑張って作成したりしていました。
それはそれで僕のスキルアップにはつながったと思うんですけど、Font Awesomeの存在をもっと早く知っていれば…てなりましたね。
アイコンがあるだけですごいデザインがよく見えてきます。なんか殺風景だな～なんて思ったらアイコンを1つ入れてみると一段階デザインが良くなるかもですね。
あんまり使いすぎるのもごちゃごちゃしちゃうので気をつけたいですが…
今回はFont Awesomeの導入と表示方法でした。Webアイコンフォントについてはもっとくわしくまとめていきたいと思います。
