個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

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

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

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

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

HTMLを記述する

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

@font-faceを定義する

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

cssを定義する

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

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

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

以上で完成です。

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

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

  • 0
  • 0
  • 1
  • 4

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

この記事を読んだ人はこんな記事も読んでいます

左右からメニューがスルッ!CSSだけで作れらたオフカンバスメニュー

左右からメニューがスルッ!CSSだけで作成されたオフカンバスメニュー6

CSSだけで作られたオフカンバスメニューをまとめてご紹介します。 「オフカンバスメニュー」は、ボタ

記事を読む

写真/画像に3DCGポリゴン風エフェクトをかけてくれる無料/フリージェネレーター5つ

背景に使いたい!美しくカラフルなトライアングルメッシュ画像をSVGとして作成できるjsライブラリー「Trianglify」

最近よく見かける背景画像といえば、美しいボケ味の効いた画像やカラフルなピクセルパターンですが、美しく

記事を読む

CSSスプライト作成の決定版!これ以上ない使いやすさの「Spritebox」

CSSスプライト作成の決定版!これ以上ない使いやすさの「Spritebox」

CSSスプライトを誰でも簡単に、しかも見やすく生成できてしまうツールのご紹介です。 CSSスプライ

記事を読む

名だたるデザイナーが作成したフリーのWEBサイト用PSDファイルが無料!Dribble発Photoshop用サイトテンプレート

名だたるデザイナーが作成したフリーのWEBサイト用PSDファイルが無料!Dribble発Photoshop用サイトテンプレート45

今回もDribbbleから。 Dribbbleは世界の名だたるデザイナーが作品をアップしているコミ

記事を読む

SVGのシームレスパータンを生成できる無料のフリージェネレーター「PatternBolt」

SVGのシームレスパータンを生成できる無料のフリージェネレーター「PatternBolt」

簡単にWEBサイトの背景画像が作れてしまう無料ジェネレーターのご紹介です。 つくれるのは、SVG形

記事を読む

無料で使えるフラットデザインUIキット40

フラットデザインのUIキットをご紹介します。 さまざまなサイトで取り入れられているフラットデザイン

記事を読む

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法をご紹介します。 リボン関連に

記事を読む

ブラウザがあればOK!コードを即実行・確認できるツール

ブラウザでプログラミング!ブラウザでコードが書けて実行・確認できるサービス14

ブラウザでコードが書けて実行・確認できるサービスをご紹介します。 サイトを実際に公開する前にテスト

記事を読む

これは簡単!CSSだけで棒グラフが作成できてしまう「chart.css」

これは簡単!CSSだけで棒グラフ/チャートが作成できてしまう「chart.css」

CSSだけで棒グラフ/チャートが作成できてしまう「chart.css」をご紹介します。 CSSファ

記事を読む

美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」

美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」

ズボラな自分に最適なCSSグラデーション作成ツールがあったので、ご紹介します。 グラデーションを自

記事を読む