Font Awesomeの使い方

2017.12.8 (金)

正直このアイコンがどこまで使えるかという問題があるはあるんですが、Font AwesomeはWebページで使われる典型的なアイコンを文字として扱うことができるサービスです。コーディングするときには、

<img src="icon.png">

と書く必要がなくなり、

<i class="fa fa-tasks fa-lg"></i>

という感じでクラスの指定だけでいける。
CSSを読み込むだけで使えるのでとてもいいです。依存関係までちゃんと見ていないのですが、最新のブラウザーではそこそこ使えるんじゃないかというところです。$60で有償版も使うことができます。買ってみようかな。

設定と準備

CDNを使う場合は、

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">

ダウンロードしてローカルで完結する場合は、
Font Awesome Download
ここからダウンロードできます。fontawesome-all.min.cssあたりを読み込んで使います。

iconを探す

一覧からアイコンを探します。
http://fontawesome.io/icons/
それぞれのiconにサンプルコードがついているので、それをコピペするだけです。大きさや色なども自由に設定できます。


https://saruwakakun.com/html-css/basic/font-awesome