アイコンを表示させる4つの方法

こんにちは、horiuchiです。
秋らしさがますます感じられる今日この頃。。。
今回はアイコンを表示させる方法をまとめてみました

画像(pngやgif)を使う①

一番王道なpngやgif画像を使う方法ですね

メリット

• ブラウザに依存しない

デメリット

• 元サイズより大きく表示すると画像が荒くなる
• 加工ソフトがないと色が変更できない

画像(svg)を使う②

SVGファイルとは拡大や縮小に強いベクター形式の画像です
しかし、複雑なアイコンであればあるほどソースが長くなり、ファイルが重くなる可能性があるのでシンプルなものに限って使用したほうが無難かもしれません。

メリット

• ブラウザに依存しない
• テキストエディタでサイズや色が変えられる

デメリット

• アイコンが複雑なものだとソースが長くなり、かえって重くなることも

疑似要素（:bofore,:after）を使う

ウェブページを更新する方なら分かると思いますが、やっぱりなるべく加工ソフトを使わずにスタイルシートだけで変更できるのが理想ですよね。

参考サイトは下記参照

メリット

• スタイルシートだけで色が変更できるので更新が楽

デメリット

• ブラウザや既存ページのスタイルによって上手く表示されない場合も
• スタイルシートでできるアイコンに限りがある
• スタイルシートの記述が増える

Font Awesomeを使う

アイコンの種類は下記参照

使い方は下記参照

メリット

• 簡単にアイコンを設置できる

デメリット

• HTMLソースの記述が長くなる

最後に

やっぱりアイコンひとつとっても「更新のしやすさ」「拡張性」は重要な要素ですよね。
私も「誰もが使いやすい」ページを目標にこれからのサイト制作に励んでいきたいと思います^^