Blog

【HTML・CSS】FontAwesomeでアイコン制作が激減!オススメのアイコンWebフォントをまとめました。

2015.03.10 | HTML・CSS | 2805views


20150310こんにちわ、龍弥デザイン脇坂です。

今回は以前ご紹介したFontAwesome(フォントオーサム)」を使って、Illustratorなどを使ってのアイコン制作の手間を減らそう!という記事です。

FontAwesomeを見たことがある方はご存知だと思うんですが、アイコン一覧ページの中から自分の目的にあったアイコンを探すのがけっこう大変ですよね?

だから僕自身がよくつかっているアイコンなどをソース付きでまとめてみました。
事前に以下のコードをHTMLの<head></head>内に読み込んで準備してください。

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

これで準備オッケー。

FontAwesomeのオススメのアイコンWebフォントをまとめました

スマホ版でよく使う!メニュー開閉ボタン

レスポンシブWebデザインでページを制作する際によく使います。以前はいちいちアイコンを作っていたりしたんですが、この手間はほぼなくなりました。

その1. fa-bars

<i class="fa fa-bars"></i>
.btn  {
 font-family: FontAwesome;
 content: "\f0c9";
}

その2. fa-list

<i class="fa fa-list"></i>
.btn  {
 font-family: FontAwesome;
 content: "\f03a";
}

これもアイコンフォントでよくない??メールアイコン!

これもFontAwesomeにバッチリあります。

その1. fa-envelope

<i class="fa fa-envelope"></i>
.btn  {
 font-family: FontAwesome;
 content: "\f0e0";
}

その2. fa-envelope-o

<i class="fa fa-envelope-o"></i>
.btn  {
 font-family: FontAwesome;
 content: "\f003";
}

「もっと読む」やリンクのアタマに!矢印アイコン!

矢印アイコンはよく使いますよね。頻繁に出てくるのでとても便利です。

その1. fa-arrow-circle-o-right

<i class="fa fa-arrow-circle-o-right"></i>
.btn  {
 font-family: FontAwesome;
 content: "\f18e";
}

その2. fa-arrow-circle-right

<i class="fa fa-arrow-circle-right"></i>
.btn  {
 font-family: FontAwesome;
 content: "\f0e0";
}

その3. fa-arrow-right

<i class="fa fa-arrow-right"></i>
.btn  {
 font-family: FontAwesome;
 content: "\f061";
}

これも「もっと読む」やリンクのアタマに!大なりアイコン!

大なりのアイコンもけっこう使いますよね。シンプルなデザインで構成されていると、矢印よりもこちらのほうが使いやすかったりします。

その1. fa-angle-right

<i class="fa fa-angle-right"></i>
.btn  {
 font-family: FontAwesome;
 content: "\f105";
}

その2. fa-angle-double-right

<i class="fa fa-angle-double-right"></i>
.btn  {
 font-family: FontAwesome;
 content: "\f101";
}

SNSボタンをオリジナルにしている場合はこれ!各種ソーシャルアイコン!

各種ソーシャルボタンもデフォルトのものを使うことが多いとは思いますが、オリジナルのデザインで装飾したい時にもFontAwesomeは便利です。

その1. fa-facebook

<i class="fa fa-facebook"></i>
.btn  {
 font-family: FontAwesome;
 content: "\f09a";
}

その2. fa-facebook-official

<i class="fa fa-facebook-official"></i>
.btn  {
 font-family: FontAwesome;
 content: "\f230";
}

その3. fa-facebook-square

<i class="fa fa-facebook-square"></i>
.btn  {
 font-family: FontAwesome;
 content: "\f082";
}

その4. fa-google-plus

<i class="fa fa-google-plus"></i>
.btn  {
 font-family: FontAwesome;
 content: "\f0d5";
}

その5. fa-google-plus-square

<i class="fa fa-google-plus-square"></i>
.btn  {
 font-family: FontAwesome;
 content: "\f0d4";
}

その6. fa-twitter

<i class="fa fa-twitter"></i>
.btn  {
 font-family: FontAwesome;
 content: "\f099";
}

その7. fa-twitter-square

<i class="fa fa-twitter-square"></i>
.btn  {
 font-family: FontAwesome;
 content: "\f081";
}

※なぜか今回「fa-facebook-official」だけ表示されなかったんですが、普通に書いていただければ表示されると思います。

FontAwesomeのおかげでアイコン制作にかけていた時間が短縮されました

いかがでしたか?FontAwesomeを使えば今までアイコン制作に割いていた時間を違う作業に割り当てることができます。制作の効率化にとても役立つものなんじゃないかなと思っています。

もちろんFontAwesomeにはないアイコンとかもあります。(はてなブックマークとかね・・・)それに関してはフリーのアイコンを探してストックしておき、それでも気にいるものがなければ最後に自分で作るのがいいんじゃないかなと思います。

それではまた。

このエントリーが役に立ったらシェアしてください


LLC JIRIKI HOME

この記事を書いた人

脇坂 基徳

著者:龍弥デザイン

岡山県でホームページ&ウェブサイト制作を承っている龍弥デザインは、
ホームページ&ウェブサイトのデザイン・コーディングなどの制作や修正・更新、
WordPressなどのCMSの導入・カスタマイズ、Facebookページの制作、
各種Flashの制作などを行っているフリーランスのWebデザイナーです。

LLC JIRIKI