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

2015.3.10

今回は以前ご紹介した「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デザインでページを制作する際によく使います。以前はいちいちアイコンを作っていたりしたんですが、この手間はほぼなくなりました。

<i class="fa fa-bars"></i>

.btn  {
 font-family: FontAwesome;
 content: "\f0c9";
}

<i class="fa fa-list"></i>

.btn  {
 font-family: FontAwesome;
 content: "\f03a";
}

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

<i class="fa fa-envelope"></i>

.btn  {
 font-family: FontAwesome;
 content: "\f0e0";
}

<i class="fa fa-envelope-o"></i>

.btn  {
 font-family: FontAwesome;
 content: "\f003";
}

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

<i class="fa fa-arrow-circle-o-right"></i>

.btn  {
 font-family: FontAwesome;
 content: "\f18e";
}

<i class="fa fa-arrow-circle-right"></i>

.btn  {
 font-family: FontAwesome;
 content: "\f0e0";
}

<i class="fa fa-arrow-right"></i>

.btn  {
 font-family: FontAwesome;
 content: "\f061";
}

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

<i class="fa fa-angle-right"></i>

.btn  {
 font-family: FontAwesome;
 content: "\f105";
}

<i class="fa fa-angle-double-right"></i>

.btn  {
 font-family: FontAwesome;
 content: "\f101";
}

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

<i class="fa fa-facebook"></i>

.btn  {
 font-family: FontAwesome;
 content: "\f09a";
}

<i class="fa fa-facebook-official"></i>

.btn  {
 font-family: FontAwesome;
 content: "\f230";
}

<i class="fa fa-facebook-square"></i>

.btn  {
 font-family: FontAwesome;
 content: "\f082";
}

<i class="fa fa-google-plus"></i>

.btn  {
 font-family: FontAwesome;
 content: "\f0d5";
}

<i class="fa fa-google-plus-square"></i>

.btn  {
 font-family: FontAwesome;
 content: "\f0d4";
}

<i class="fa fa-twitter"></i>

.btn  {
 font-family: FontAwesome;
 content: "\f099";
}

<i class="fa fa-twitter-square"></i>

.btn  {
 font-family: FontAwesome;
 content: "\f081";
}

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

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

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

それではまた。