iscle [イズクル] - あなたの生活に役立つネタを!

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

竹中文人
執筆者:
[最終更新日]2014/06/19
[カテゴリ]Web・IT

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

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

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

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

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

CSSのアイコンは『Font Awesome』というサイトで提供されており、現時点でなんと439種類ものCSSアイコンが無料で利用できます。
Font Awesome
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>タグ部分をコピーして、アイコンを表示させたい場所に貼り付けましょう!これだけでアイコンが表示されます。
css-icon-03

大きさを変更する

アイコンは大きさや角度などをカスタマイズすることも可能です。大きさを変更するには、先ほどの<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』だけではありません。各サイトで挿入するタグが多少異なりますが、基本は指定されたタグを挿入するだけで表示されます。好みのアイコンを見つけて利用してみましょう。

■One div
css-icon-04
http://one-div.com/

■CSS3 Monochrome Icon Set
css-icon-05
http://cssdeck.com/labs/css3-monochrome-icon-set

■CSS3 Icons
css-icon-06
http://www.uiplayground.in/css3-icons/