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

今日はこのアイコンを変更する方法や、任意の場所に「Font Awesome Icons」を利用する方法をご案内します。
※ 最新の手順は、逆引き辞典の「フォルダ毎に表示するアイコンを指定する」をご参照ください。

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

Font Awesome Icons：
https://github.com/FortAwesome/Font-Awesome

さて、具体的に「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」を、視覚的にわかりやすいサイト作りにぜひご活用ください。