CSSだけで作成したアイコンを利用する

最近では画像を使わずにCSS3でボタンを表現することが一般的になってきました。アイコンもCSSだけで作られたものがたくさん公開されています。それらを利用し、HTML/CSSだけでWebページにアイコンを表示する方法を解説します。

画像を使わないアイコンとしては、アイコンをWebフォントとして利用する方法があります。
こちらも便利なのですが、フォントファイルは容量が大きくなりがちですので、アイコンの数が少ない場合はCSSアイコンを使うと軽量化につながります。

自分でアイコンをCSSで作るのは面倒ですが、フリーライセンスで提供しているサイトもたくさんありますので、それらを積極的に活用してみましょう。

【コンテンツ】

  1. CSSアイコンの作成例
  2. おすすめサイト

CSSアイコンの作成例

ほとんどが、before/after疑似要素を使って表現しています。
CSS3で追加されたプロパティを使って、複雑な形をうまく表現したものもあります。

以下は実際にこのページでCSSアイコンを表示した例です。

CSSは以下のようになっています。

HTMLの記述方法はCSSの作りに依存します。
コードを提供しているサイトで、HTMLの記述方法が示されていますのでそれを参考にします。

上の例では、divタグに「class="css-icon-hand"」を追加すればいいだけです。

おすすめサイト

おすすめサイトとして2つほどあげます。

UIPLAYGROUND

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

アイコンの数は200種類以上と非常に多いです。
アイコン画像をクリックすると、HTMLコードが記述されたポップアップウィンドウが表示され、そのコードをそのまま貼り付ければいいだけになっています。

スタイルは、HTML文書内にstyle要素を使って記述する様式になっており、しかもすべてのアイコンのクラス名が共通なので、この部分が少し使いづらいところです。
同じページで複数のアイコンを使用する場合はクラス名を変える必要があります。

UIPLAYGROUNDのサイト

以下は、このサイトからいくつかコードをコピーして表示した例です。

  • play
  • pause
  • next
  • prev
  • signal
  • home
  • vol-up
  • mark3

Pure CSS GUI icons

http://nicolasgallagher.com/pure-css-gui-icons/

アイコンの数はそれほど多くありませんが、a要素のbefore/after疑似要素にスタイルを設定しているのが特徴です。
そのため、アンカーリンク付きのアイコンを表示することができます。

Pure CSS GUI icons のサイト

以下は、このサイトからいくつかコードをコピーして表示した例です。

スポンサーリンク

ページの先頭へ