Home » 開発者ブログ » 今ではアイコンの定番!「Fort Awesome Icons」の使い方

今ではアイコンの定番!「Fort Awesome Icons」の使い方

Fort Awesome Icons」は585アイコン(2015年10月8日現在)をサポートしているフォントアイコンです。
従来の画像(imgタグ)で表示するアイコンとは違い、フォントCSSのclassで表示きます。

font awesome icons

MaxCDNでも配信されているようなので、ちょっと使ってみたいと思います。
まずは、<head>タグの中で下記のCSSを見込みます。

参照:「Fort Awesome Icons」の使い方

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

トップページからダウンロードした方は、下記のようにCSSを読み込みます。

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

書き方はとっても簡単。
下記にアイコン一覧を紹介しているページがありますので、選んだアイコンをクリックしてみてください。

参照:アイコン一覧はこちらから
すると、コードの書き方が掲載されています。

<i class="fa fa-search"></i>

       

このように大きさも変えられますし、SNSのアイコンも一通りあるのでとても便利です。
画像アイコンを作ったり書き換えたりするのは大変ですが、これなら誰でも簡単に表示できます。