ノウハウをいつでも。ウェブマーケティングのポータルサイト

Movable Type Tips

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

このエントリーをはてなブックマークに追加
      
follow us in feedly
友だち追加数
本記事は、MovableType.net 活用ブログ に投稿した記事に加筆を加えて転載したものです。オリジナル記事はこちら です。

今回は、SaaSとして提供しているCMS、「MovableType.net」のTipsについてご紹介します。

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

© MAKEPO

 
このエントリーをはてなブックマークに追加
   
follow us in feedly
友だち追加数

著者情報

オサナイタケシ

長内毅志

Movable Type プロダクトマネジャーを経て、現在、Movable Type エバンジェリスト兼デベロッパーリレーションマネジャー。

他の参加者を見る

長内毅志

関連記事

マーケティングノウハウ足りてますか?

MAKEPOのメルマガ…購読してみませんか?
直近のピックアップ記事のほか、セミナー・ツール活用情報など不定期でお伝えしています。「サイトにアクセスするのは面倒だ!」「電車の中でざっくり読みたい」という方は是非ご登録ください。 リアルタイムで情報取得をしたい方は、RSSまたは公式Twitterをフォローしてご覧ください!

通勤中の情報収集に!

メルマガ登録

いますぐ新着情報を知るなら

LINE@で友だちに追加!