ウェブサイトに
アイコンを入れる際、皆さんはどんな方法をとっていますか？
私は、Font Awsomeをよく使います。
今回は、Font Awsomeがオススメな理由について書きます。
Font Awsomeとは？
アイコンをフォントとしてデータ化したアイコンフォント。
文字としてアイコンを入れ込めるのが特徴でとても便利です。
こちらがFont Awsomeで入れたアイコンの例です。
絵文字みたいですね。こういうアイコンがたくさんあります。
詳しくはFont Awsomeのアイコンのページをご覧ください。
Font Awsome 簡単に使い方
簡単に使い方を解説します。
①トップページの「Start for Free」をクリック
２、メールアドレスを入力 「Send Kit Code」を押す
（昔は会員登録しなくても使えましたが今は、ちょっと変わったみたいです）
３、メールが届くので「Click to Confirm Your Email Address + Set Things Up」というボタンをおす。
リンクで移動した先で名前やpasswordを設定
４、入力が終わると、こんなコードがあるページに飛ぶので「Copy Kit Code」を押して
コードをコピーして、コピーしたコードを使いたいwebページの<head></head>内に貼り付けます。
５、アイコンページより、使いたいアイコンを選ぶ
６、選択したアイコンのページの赤枠で囲った箇所をクリックし
アイコンのhtmlをコピーする。コピーしたものをhtmlファイルの入れたい箇所に貼り付ける
すると、
このように入力できます。
Font Awsomeがオススメな理由
Font Awsomeは文字なのでcssで色が変わる
Font Awsomeは文字としてサイトに入れ込まれます。
font-sizeや、colorなどの文字に対するプロパティーで
色を変えたり、サイズを変えたりできます。
アイコンを画像で入れ込むと、hoverの際色が変わる作りにしたい場合
通常のアイコン画像と、色が変わった際のアイコン画像2枚を作って入れ込まなければなりません。
それがcssで解決できるので、簡単です。
フォルダにimgを入れなくていい
これも、Font Awsomeが文字だから。
サイトを作ると、imgフォルダーにimgがいっぱいになってしまいます。
それを少しでも削減できます。
Font Awsomeは数が多い
有料のProで7000以上、
無料でも1500以上のアイコンが使えます。
あのアイコンないな〜と困ったことはあまりありません。
Font Awsomeは企業アイコンがある
YouTubeはこちら。Twitterはこちら。
などのリンク作成の際、わざわざ、企業サイトからアイコンをダウンロードして
入れ込まなくても利用できます。
絵文字と違って環境依存が少ない
最近、クライアントにアイコンを絵文字で入れ込んでくれ！
と言われ、対応してみたのですが、見るブラウザにより違ったものを表示したりと
環境依存がすごかったので結局使わなかったです。
Font Awsomeは環境依存しなかったので結局Font Awsomeを利用しました。
いかがだったでしょうか？
Font Awsome使ったことない方、試しに使ってみてはいかがだろうか？