ウェブサイトサンプル

MovableType.net のいくつかのテーマに利用されている以下のようなアイコンですが、これ、実は画像 URL を指定して表示するのではなく、「Font Awesome Icons」というものを利用しています。

今日はこのアイコンを変更する方法や、任意の場所に「Font Awesome Icons」を利用する方法をご案内します。

「Font Awesome Icons」はいわゆる Web フォントで、画像ではなく文字の扱いになります。
そのため、拡大、縮小が容易でサイズ変更を行っても綺麗な状態で表示できる、変更が容易であることがとても魅力的な手法になります。
また、「Font Awesome Icons」で提供されているアイコンには種類が豊富なため、どういったページのデザインにも使いやすいです。

Font Awesome Icons：
http://fortawesome.github.io/Font-Awesome/icons/

さて、具体的に「Font Awesome Icons」はどう表示しているかというと、以下のように

<i class="fa fa-lg glyphicon fa-tag"></i>

表示したい箇所に HTML で class を指定しています。
上記の表記は、以下の部分の表示で利用しています。

もし該当部分のアイコンを変更したい場合、上記の「<i class="">」の部分を書き換えてください。

また、任意の場所にアイコンを表示したい場合は、「Font Awesome Icons」で希望のアイコンを見つけてから、個別ページに記載のある「<i class="">」の部分を HTML に追記してください。

なお、各テーマで利用できるバージョン（Created）は、ソースコードの「maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css」の「4.1.0」の部分をご確認ください。

ご利用いただきたいアイコンのバージョンは、アイコンの個別ページでご確認いただけます。

以上です。

「Font Awesome Icons」を、視覚的にわかりやすいサイト作りにぜひご活用ください。