webfontでアイコンを簡単に!Font Awesome


デザイン 2016年6月11日 159
webfontでアイコンを簡単に!Font Awesome

webサイトをデザインするときにアイコンを用意するのは手間だと思います。

特にSNS系のアイコンは公式サイとに移動してアイコンセットをダウンロードしてサーバにアップ。これだけで結構な工数なのにSNSの数だけやらないといけない。これは正直、面倒くさいです。

ですが、このFont Awesomeというアイコンのwebフォントを使えばすぐにwebサイト上にアイコンを表示させることができます。

desighn02

アイコンの数がたくさんあります。これだけ使えるとweb制作において便利です。ただ、数が多すぎて欲しいアイコンを見つけるのが大変です。

しかも、SIL OFL 1.1ライセンスで公開しているので、特定の条件ならば無料で使用できます。

特定の条件について詳しくはこちらを参照

アイコンをwebフォントとして使えるので楽にアイコンを実装できます。

例えばfacebookアイコンならば、

 

<i class="fa fa-facebook-square" aria-hidden="true"></i>

と記載するだけで使用できます。

こちらのページに多様な使い方のサンプルがあるので参考にしてください。

http://fontawesome.io/examples/

実装方法は簡単で<head>タグの中に下記コードを埋め込むだけです。

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

まだ、使っていないwebデザイナーは是非、使ってみてください。

デザインに幅ができ、工数も削減されると思いますよ。

Facebook