「Font Awesome」はWEB上で使われるアイコンをWebフォントとして使用できるもので、フォントと同じ扱いなので、大きさや色はCSSで調整ができます。 デザイナーよりの自分としては、自作のオリジナルアイコンを使うのが定番だったので、ほとんど使ってませんでしたが、使用場所によっては、WEBアイコンを使ったほうが便利な時もありますし、アイコンも文字情報として認識するので、SEO的にいいんだとか、なんとかかんとか…。 そんな訳で「Font Awesome」を使ってWEBアイコンを表示させる方法のまとめです。 Font Awesomeを読み込む ローカルに「Font Awesome」本体をダウンロードするやり方 Font Awesomeのサイトから本体をダウンロードして、指定の場所に「font-awesome.min.css」を読み込む CDNで読み込むやり方 読み込みURLの途中の「4.7.0」はバージョンです。バージョンによって使えるアイコンが変わるみたいなので、現在の最新版を読み込んでおくのが無難かと。 ※2017年6月現在は「4.7.0」が最新のようです。 HTML記述でアイコン表示 アイコン一覧ページから使用したいフォントを選びます。 検索して探すか、一覧から探す方法がありますが、検索する場合はもちろん英語オンリーです。 該当アイコンが見つかったらページ内にあるソースコードをコピー。 【HTML】 classは「fa」と「fa-◯◯◯」というデフォルトのclassがついています。 例えば、テキストリンクリストに表示させたい場合だと、SNSのリンクとかよく使うんじゃないでしょうか？ アイコン単体でフォントサイズや色などを変更できるので、レイアウトの幅はCSSの可能範囲ならいくらでも可能です。テキストサイズは読み込んでいる「font-awesome.min.css」でデフォルトのサイズ指定があるようなので、「ul li .fa」などを新たに追加すればいくらでも変更できます。 もちろんいくら拡大しても荒れません。 DEMO CSSのcontentプロパティでの使用方法 HTMLに＜i＞タグで表示させる以外にもCSSの「content」プロパティでも表示させることもできます。