アイコンフォントを導入してみました。

2016/08/22WEBサービス, WEB

どうも、リョウ(@ryskyshd)です。

このブログで利用しているWordPressテーマは言わずと知れたStinger3です。

何と言ってもこれだけすごい機能が満載なのに無料ってとこがイイですよね!
さて、今日はそんなStinger3にミニミニ、それも超が5個ぐらいつくほどミニミニなカスタマイズを施しましたのでメモです。

アイコンフォントを導入してみた

アイコンフォントってご存知でしょうか。
以下のサイトが分かりやすいかも。

WEBフォントのアイコン版、ですかね…(よく分かっていない)
とにかく、通常のアイコンは画像ですが、アイコンフォントはアイコンの姿をしたフォントですから、CSSで色とか大きさを気軽に変更できるのが大きな導入メリットです。

Font Awesome

導入したのは超有名なFont Awesomeです。

導入方法は色々あるけど

超簡単な方法でサクッと導入してみました。
サイトにも説明がありますが、以下のソースをしかるべきところに入れるだけ。

これだけ。
もうこれだけでバンバン使えます。
デメリットとか一切考えずに導入しました、あるか分からないですけど。

使用方法

上記のサイトで使用したいアイコンを選択すると以下のようなソースが表示されますので、それを表示したいところに挿入するだけ。
ほんとにこれだけです。
拍子抜けするほど簡単。

そうすると、 ←こんな風になります。
←こんなのとか、 ←こんなのとか。
もうやりたい放題(笑)
また、それぞれclass名が割り振られていますので、CSSでゴニョゴニョ指定すれば望み通りの大きさや色に変更できます。

こんな感じで使ってみた

トップページなどのエントリータイトルの下にこんな感じで使ってみました。
webfont
ちょっとだけ視認性が上がった気がしますね。

最後に

いかがでしたでしょうか。
導入前は何となく難しそう、面倒臭そうって感じがしてましたが、実際にやってみるとほんとに簡単でした。
ただ、多用すると安っぽくなりそうな気がしますので、控えめにいきたいですね。

スポンサーリンク