WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： デザイン >フォント

webサイトを制作する際に、テキストの見え方もデザインの1つとして取り入れる事も多くあります。
最近では、欧文フォントだけでなく、日本語フォントの種類も増えていて、webサイトのデザインに合わせてフォントを変えるだけでサイトの雰囲気もガラっと変わります。
今回、アイコンの表示を画像では無くwebフォントとして表示できる「Font Awesome」というフォントセットで紹介したいと思います。

webフォントとは？

CSS(cascade style sheet)のバージョン3.0で新たに導入された仕様で、テキストの表示に利用するフォントデータを指定した場所からダウンロードして使用できるようにするものです。
WindowsやMac、その他様々なOSによって表示されるフォントは変わってしまうので、意図していない表示になってしまう事があります。
ですが、webフォントを利用する事で、ユーザーの環境に左右されることが無くなります。

webフォントでアイコンを表現する良い所は？

テキストだからCSSを使って拡大や縮小も綺麗にできます。
もちろん、文字色や背景色を指定するだけでアイコンに色を付ける事ができるので、細かいデザイン変更も柔軟に対応できて便利です。

画像データで用意した場合、変更したい時にデザインデータから変更をしないといけないので、手間が掛かってしまいます。
上記で説明した通り、CSSを変更するだけでデザインを変える事ができるので、少しの手間や時間を短縮する事ができます。

実際に「Font Awesome」を使ってみよう

まず、アイコンを表示させるFont Awesomeを導入する必要があります。
導入といっても方法は簡単で、Font Awesomeを利用したいHTMLソースのhead内に下記を記述します。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css”>

ここで読み込まれているcssには、Font Awesomeのフォントファイルを読み込む指定などが記述されています。
この一行を追加するだけで準備は完了です。

もう一つの方法として、Font Awesomeの公式サイトから一式ファイルをダウンロードしてきます。
ダウンロードしてきた　zipファイルを展開し、cssフォルダとfontフォルダを自身のウェブサイトへアップロードして下さい。
次に、Font Awesomeを使いたいHTMLのhead内に、「font-awesome.min.css」ファイルをスタイルシートとして読み込む記述を追加します。

<link rel="stylesheet" href="./css/font-awesome.min.css”>

このように記述を追加しますが、自身のwebサイトに実際にアップロードしたディレクトリ名やフォルダ名に合わせて記述を追加して下さい。

IE7への対応方法

Font Awesomeのアイコンの表示は、:before擬似要素とcontentプロパティを使用している為、そのままではIE7以下では利用できません。
Font Awesomeの古いバージョンには、IE7専用のCSSが用意されているので、IE7に対応させる場合は、Font Awesomeのバージョン3.2.1をダウンロードして、以下のような記述を追加して下さい。

<link rel="stylesheet" href="./css/font-awesome.css">
<link rel="stylesheet" href="./css/font-awesome-ie7.css”>

これで準備は整いました。早速アイコンを表示させてみましょう。

アイコンの指定方法

アイコンの表示方法、i要素にclass属性を指定する方法が簡単です。
「fa」というclass名を必ず指定した上で、「fa-home」など各アイコンに割り振られたclass名を指定します。
どんなアイコンがあるか知りたい場合は、Font Awesome公式サイトの「Icons」から探してみましょう。
homeで検索してみると、「fa-home」のアイコンが出てきます。

ではこの「fa-home」アイコンを使用して、HTMLに記述すると、

<p><li><i class="fa fa-home"></i>Home</li></p>

このようにアイコンが付いたテキストが表示されます。
これをさらに、グローバルナビゲーションとして変更していきます。

＊HTML

	<header>
		<nav>
			<ul>
				<li><a href="#" class="hvr-trim"><i class="fa fa-home"></i>Home</a></li>
				<li><a href="#" class="hvr-trim"><i class="fa fa-building"></i>Company</a></li>
				<li><a href="#" class="hvr-trim"><i class="fa fa-heart-o"></i>Service</a></li>
				<li><a href="#" class="hvr-trim"><i class="fa fa-map-marker"></i>Access</a></li>
				<li><a href="#" class="hvr-trim"><i class="fa fa-envelope-o"></i>Contact</a></li>
			</ul>
		</nav>
	</header>

＊CSS

・アイコン部分のcssの記述

.fa {
	display: inline-block;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding-right:3px;
	font-size: 18px !important;
}

・グローバルナビゲーション部分のcssの記述

nav{
	width:900px;
	margin: 0 auto;
	clear:both;
	overflow: hidden;
}

nav ul{
	
}

	nav ul li{
		width: 172px;
		float: left;
		margin-right: 10px;
	}
		nav ul li:last-child{
			margin-right: 0px;
		}
	
	nav ul li a[class^="hvr-"] {
		width: 145px;
		display: inline-block;
		vertical-align: middle;
		margin: 10px 0px;
		padding: 1em;
		cursor: pointer;
		background: #e1e1e1;
		text-decoration: none;
		color: #666;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}

このように記述すると、webフォントによってアイコン付きのグローバルナビゲーションが簡単に作成できます。

クラス「fa」はアイコン初期設定になります。こちらにcssの記述を追加していく事で、アイコンに変化を加える事ができます。

アイコンを個別で変化を加えたい場合は、アイコン毎に付いている「fa-***」クラスを変更することで変えることができます。
試しに、グローバルナビゲーションにある「service」のハートのアイコンのみ変更します。

＊css

.fa-heart-o:before {
	content: "\f08a";
	color: #F00;
}

記述で書かれている「content: “\f08a”;」というのは、公式サイトにアイコン毎に
書かれているので、参照して探してみて下さい。

cssでハートの部分のみ赤に変更してみました。

まとめ

今回はFont Awesomeを使用したwebフォントによるアイコンの表示方法を紹介しましたが、他にも様々なアイコンセットが提供されていますので、制作したwebサイトに合うものを探して使用してみてください。

■webフォントに関連する記事でこちらもご参考下さい。
超簡単！Googleが提供するWebフォントの実装