楽して効率アップ! WEBフォントアイコン【Font Awesome】

2017/05/11

こんにちわ、デザイナーの青木です。管理画面やメニューを作成す時にちょっとしたアイコンってよくつかいますよね?そのメニューにあわせたアイコンを作成するって結構な手間で、しかもフーバー表現なんて考えるともう大変です 。

そこで今回オススメしたいのWEBフォントアイコンの「Font Awesome」。要はWEBページ上でも、「テキストと同じように表示できるアイコン」です。画像で作るのとはちがい、拡大してもぼやけないし、色もサイズも簡単に変えることができます。 それでは早速使い方です。

Font Awesomeには「CDN」と「ダウンロード」の2種類ありますが、ここではお手軽に「CDN」での使いかたを説明します。

1.以下のコードをコピー

link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"

2.head内にペースト

コピーしたコードをヘッド内にペースト。/headの直前にペーストすれば大丈夫です。 以上で準備完了です。 それでは次に実際の使い方。

1.使いたいアイコンを探す

以下のページから使いたいアイコンをさがしてください。
http://fontawesome.io/icons/
アイコンが小さくたくさんあるので「Search icons」から検索したほうが見つかりやすいです。
使いたいアイコンが見つかったらクリック!


2.アイコンのコードをコピー

すると詳細画面に次のコードが表示されます(例:お風呂のアイコン)
i class="fa fa-bath" aria-hidden="true"><
これをコピーしてください。

3.アイコンコードを表示させたい箇所にペースト

あとは表示させたい箇所にペーストで完了です。

4.表示を確認

ブラウザで確認するとお風呂のアイコンが表示されているはずです。

いかがでしょうか?とくに管理画面のUIにはアイコンが大量に使用される場合があります。それを画像で作るのは一苦労です。ましてや修正や変更があった場合にはもう大変です。今回ご紹介させていただきましたWEBフォントでしたら短時間でアイコンが作成できますので大幅に作業時間を短縮でき、効率的です!是非使用を検討してみてはいかがでしょうか?

まずはお気軽にご相談ください

サービスに関するご質問やご相談の他、開発のご依頼も承っております。
ぜひ一度御社のサービスについてお話をお聞かせて下さい。

電話から相談する
03-6328-0567受付時間:10:00〜19:00 (土日祝を除く)
フォームから相談する
お問合せはこちら