webデザインにかかせないSVGアイコン。
沢山のアイコンが無料でダウンロードできる、非常に便利なサイト「Font Awesome」の使い方を紹介します。
目次
そもそもFont Awesomeとは
web上で使用できるアイコンを画像ではなく、文字（コード）として使用することができるサービスです。
いわゆるSVG形式の画像です。
SVG形式のアイコンをダウンロードして、webデザイン制作にも使用できますし、サイトからコードを取得することも出来ます。
無料のアイコンから有償のアイコンまであります。
SVGについてはこちらの記事もご覧ください。↓
コードでアイコンを表示できる利点は、大きさや色などをCSSで変更できる点にあります。
また、拡大・縮小しても画質が劣化しない点がメリットです。
Font Awesomeの使い方
Font Awesomeの公式サイトはこちら↓
トップページはこんな感じです↓
SVGアイコンをダウンロードする
まず、webデザインで使用できるように、ダウンロードの方法を紹介します。
1.トップページ上部のメニューから「Icons」をクリックします。
2.任意をアイコンを選択し、クリックします。
※このとき、薄い灰色で表示されているアイコンは有償なので、注意しましょう。
3.「Download SVG」と表示される、ダウンロードアイコンにカーソルを持っていき、クリックする。
4.利用規約が出てくるので、「Agree&Download the SVG」ボタンをクリックする。
これで、SVGアイコンがダウンロード出来ます。
ダウンロード手順まとめ
- トップページ上部のメニューから「Icons」をクリックする。
- 任意をアイコンを選択し、クリックする。
- 「Download SVG」と表示される、ダウンロードアイコンにカーソルを持っていき、クリックする。
- 利用規約が出てくるので、「Agree&Download the SVG」ボタンをクリックする。
HTMLコードを取得（コピー）する
アイコン詳細画面のコードをクリックすると自動でコードをコピーすることが出来ます。
これをHTMLの任意の場所にペーストすればOKです！
CSSでFont Awesomeを表示させる方法
先ほどはHTMLでアイコン表示させる方法を紹介しました。
CSSでもFont Awesomeの表示が可能です。
CSSで表示する際は、「before擬似要素」と「after擬似要素」を使う場合が多いです。
前準備：CDNを使う
CDNとは、専用のサーバー常にあるフォントや画像データを読み込んで、サイトに表示させる仕組みです。利点としては、webサイトのデータが軽くなる点が挙げられます。
↑上記のURLから、「Load All Styles」という見出しのlinkタグをコピーして、HTMLのheadタグ内に貼り付けてください。
↓下記コードをコピーしても大丈夫です！
CSSでの表示例
1.HTMLに下記コードを記述します。
今回はspanタグの部分に、リンゴのアイコンが表示されるようにコーディングします。
2.CSSを指定します。
content: “\f5d1”;
font-family: “Font Awesome 5 Free”;
font-weight: 900;
}
上記のコードが、アイコンを表示するのに必要最低限のセレクタになります。
詳しく紹介していきますね。
content
「content」には、アイコン詳細ページの上部に表示される文字列を記述します。↓
このとき、\（バックスラッシュ）を文字列の前につけるのを忘れないように注意しましょう。
font-familyとfont-weight
「font-family」と「font-weight」は使うアイコンによって指定が変わります。↓
肝心の表の見方について。
アイコンの詳細ページで、アイコンのstyleが何なのかを確認することができます。↓
今回使用するアイコンは「Solid Style」と書いてあります。
なので、表の「Solid」部分が該当することが分かります。
「@font-face weight」が「font-weight」にあたりますので、ここに表示されている「900」を指定すれば良いです。
また、「@font-face font-family」が「font-family」に該当しますので、同様に、ここに表示されている文字列を指定すれば良いです！
まとめ
webデザイン制作で、フェイスブックやツイッターのアイコンなども配置すると思いますが、基本的に今回紹介したFont Awesomeを使用することが多いです。
SVGはデータが軽いことやCSSで大きさ、色なども変更できるので、覚えておきましょう！
WEBデザインに関するおすすめの記事はこちら↓
