簡単にアイコンフォントが利用できる「Font Awesome」

画像ではなく、フォントを使った「テキスト」でアイコンが表示できることがポイントです。
テキストなので、CSSでサイズを拡大縮小してもキレイに表示され、色も簡単に変えることもできるので、Webページのアクセントとして使うといいかもしれません。今回は導入も簡単な「Font Awesome」をご紹介したいと思います。

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

14061901

Font AwesomeのホームページからDownloadをし、解凍したらWordPressの編集しているthemeフォルダの中に入れます(WordPressの場合)。

headerにDownloadしたファイルのパスを記述しましょう

<link href="<?php bloginfo('template_directory');?>/font-awesome/css/font-awesome.min.css" rel="stylesheet" media="all" type="text/css" />

アイコンのリストに対応したclass設定

<a href="/contact"><i class="fa fa-envelope-o"></i>
お問い合わせはこちらから</a>

ブラウザで見るとこのようになります

  お問い合わせはこちらから

もう少し手を加えてボタンっぽくしてみました

  お問い合わせはこちらから

サイズなどの編集はCSSで適応できますが、Font Awesomeにはデフォルトで利用できるスタイルがいくつか用意されています。サイズを大きくしたり、周りに枠線をひいたり、角度を変えたり・・・などなど。
ある程度のことはできるようなのでわざわざ新たにCSSを書き加える必要がなく使いやすいですね。

一覧へ戻る