Movable Type.net

MovableType.net 活用ブログ

MovableType.net の新機能の使い方や、ウェブサイトの構築・運用に役立つTIPSを紹介しています。

「Font Awesome Icons」でシンプルでスタイリッシュなアイコンを利用しよう!

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

icon01.png icon02.png icon03.png
今日はこのアイコンを変更する方法や、任意の場所に「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 を指定しています。
上記の表記は、以下の部分の表示で利用しています。

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

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

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

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

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

アカウント作成は無料! 同じアカウントでウェブサイトをいくつでも作成でき、作成したウェブサイト毎に14日間無料で利用可能です。

アカウント作成

Movable Type.net は無料トライアルが可能です。
Web制作者の方で、デモや評価利用をご希望の場合は、制作者向け評価ライセンスをご利用ください。

無料トライアル 資料ダウンロード 制作者向け評価ライセンス