画像アイコンは古い？CSSで作られたアイコンなら綺麗で簡単設置

Webサイトに下図のような“アイコン”を使用する際、あなたは画像を利用しているでしょうか？

一般的に画像アイコンを使用するケースが多いと思いますが、画像の場合は輪郭がくっきりと表示されなかったりと、綺麗に表示されない場合があります。特にスマートフォン等で表示がぼやけてしまうということがあり、綺麗に表示させたいという方にとって悩みの種です。

もしくっきり綺麗にアイコンを表示させたいのであれば、CSSだけで作られたアイコンを使用してみてはいかがでしょうか？

上のアイコン４つは、全てCSSだけで作られたアイコンです！とてもCSSだけで作られたとは思えないような複雑なアイコンも存在します。しかも表示させる方法はとても簡単です。

CSSアイコンを設置する方法

CSSのアイコンは『Font Awesome』というサイトで提供されており、現時点でなんと439種類ものCSSアイコンが無料で利用できます。

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

設置するのに最も簡単な方法を紹介致します。まず下記のコードをheadタグ内に入れてください。

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

『Font Awesome』から設置したいアイコンをクリックすると、設置するためのコードが記入されたページが表示されます。<i>タグ部分をコピーして、アイコンを表示させたい場所に貼り付けましょう！これだけでアイコンが表示されます。

大きさを変更する

アイコンは大きさや角度などをカスタマイズすることも可能です。大きさを変更するには、先ほどの<i>タグ内のclass属性に次のコードを追加します。fa-lg（33%拡大）, fa-2x, fa-3x, fa-4x, fa-5x

（挿入例）

 fa-lg
 fa-2x
 fa-3x
 fa-4x
 fa-5x

（表示例）
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

角度を変更する

角度を変更するには次のようにします。

（挿入例）

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical

（表示例）
normal（通常）
fa-rotate-90（90度回転）
fa-rotate-180（180度回転）
fa-rotate-270（270度回転）
fa-flip-horizontal（水平方向に反転）
icon-flip-vertical（垂直方向に反転）

※その他のカスタマイズ方法はこちらのページに載っています。
＞http://fortawesome.github.io/Font-Awesome/examples/

その他のCSSアイコン提供サイト

アイコン提供サイトは『Font Awesome』だけではありません。各サイトで挿入するタグが多少異なりますが、基本は指定されたタグを挿入するだけで表示されます。好みのアイコンを見つけて利用してみましょう。

■CSS3 Monochrome Icon Set

＞http://cssdeck.com/labs/css3-monochrome-icon-set

■CSS3 Icons

＞http://www.uiplayground.in/css3-icons/