2013/10/17

画像を使わずにCSSとWEBフォントを利用してアイコンボタンをつくる方法

アイコンに画像を利用せず、WEBフォントとCSSを使って表現する方法が徐々に増えています。
画像を利用するのに比べて、メンテナンス、明瞭度、軽いなどの点で優れており、今後いっそう増えていきそうです。
今回はそんなアイコンに画像を利用せず、WEBフォントとCSSを使って表現する方法が「Create No Image Icons in CSS3 Tutorial – Bloom Web Design」で紹介されていたのでご紹介します。

画像を使わずにCSSだけでアイコンをつくる方法

今回はEntypo fontというWEBフォントを利用します。
サンプルデータとフォントは、Create No Image Icons in CSS3 Tutorial – Bloom Web Designのサイトからダウンロードできます。
TwitterもしくはFacebookアカウントを利用して入手してください。
それでは早速はじめてみましょう。

HTMLを記述する

まずはHTMLです。
以下のように準備します。
見ておわかりと思いますが、指定したclass名に対して、cssで定義してWEBフォントを表示するというやり方になります。

[html]
<a href="#" class="one" title="Icon 1"></a>
[/html]

@font-faceを定義する

webフォントを利用するために、@font-faceを以下のように定義します。
以下の書き方で、主要ブラウザからie8以下まで表示させることができます。

[css]
@font-face {

font-family: ‘entyporegular’;

src: url(‘Entypo-webfont.eot’); /*ieだけがサポートしている形式*/

src: url(‘Entypo-webfont.eot?#iefix’) format(‘embedded-opentype’),

url(‘Entypo-webfont.woff’) format(‘woff’),

url(‘Entypo-webfont.ttf’) format(‘truetype’),

url(‘Entypo-webfont.svg#entyporegular’) format(‘svg’);

font-weight: normal;

font-style: normal;

}
[/css]

cssを定義する

htmlで指定したclass名に対してcssを定義していきます。

[css]
.one {

/*General*/

display: block;

text-decoration: none;

/*Font*/

font-family: ‘entyporegular’;

text-align: center;

font-size:50px;

line-height:1.4;

font-weight:regular;

color: white;

/*Background*/

background-color: #4ed18f;

width:70px;

height:70px;

-moz-border-radius:3px;

-webkit-border-radius:3px;

border-radius:5px;

}
[/css]

contentプロパティでアイコンを読み込む

準備が整いましたが、このままでは肝心のアイコンが表示されません。
htmlのa要素になにも記述されていないためです。
そこでcontentプロパティを利用して、表示させたいアイコンを記述します。
ここでは、木の葉マークを入れます。
木の葉マークはEntypo fontではアルファベットGにあたります。
ですから以下のように記述します。
[css]
.one:after {

content: "G";

}
[/css]

以上で完成です。

こちらの記事で作成したサプンルです。
ご参考にどうぞ。
sample

Sponsored by

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。