Font Awesome（フォント オーサム）の使い方

Posted on by shirokuma systems

いままでずーっとAwesome Fontだと思ってました。Font Awesomeだったんですね。間違えて覚えてました。
カナ表記は「オーサム」でいいんですかね？「オゥサム」はタイプがちょっと面倒くさいかな。

Step.1

headでCSSを読み込ませます。バージョン指定はパスの赤文字の部分を適宜変えてください。

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

Step.2

空のiタグを作り、クラスを指定する。(中身の無い空のタグって文法的になんか嫌ですけども・・・)

<i class="fa fa-clock-o"></i>もう9時ですよ。

こんな風に表示されます

もう9時ですよ。

応用編

リストでFont Awesomeを使う

  • メジェド
  • バステト
  • アヌビス
  • ラー
<ul class="fa-ul">
<li><i class="fa fa-check-circle-o"></i>メジェド</li>
<li><i class="fa fa-check-circle-o"></i>バステト</li>
<li><i class="fa fa-check-circle-o"></i>アヌビス</li>
<li><i class="fa fa-check-circle-o"></i>ラー</li>
</ul>

アイコンの回転と反転

classに「fa-rotate-**」を追加します。**は角度（90, 180, 270）が入ります。

もう3時ですよ。
受話器を傾けてみた。

<i class="fa fa-clock-o fa-rotate-90"></i>もう3時ですよ。

水平反転はclassに「fa-flip-horizontal」を、垂直反転は「fa-flip-vertical」を追加します。

もう3時ですよ。
受話器を立ててみた。

<i class="fa fa-clock-o fa-flip-horizontal"></i>もう3時ですよ。
<i class="fa fa-clock-o fa-flip-vertical"></i>受話器を傾けてみた。

等幅フォントにする

classに「fa-fw」を追加します。

  •  facebook
  •  twitter
  •  Pocket
  •  Google+1
<ul class="fa-ul">
	<li><i class="fa fa-facebook fa-fw" aria-hidden="true"></i> facebook</li>
	<li><i class="fa fa-twitter fa-fw" aria-hidden="true"></i>  twitter</li>
	<li><i class="fa fa-get-pocket fa-fw" aria-hidden="true"></i>  Pocket</li>
	<li><i class="fa fa-google-plus fa-fw" aria-hidden="true"></i>  Google+1</li>
</ul>

丸の中にFont Awesomeを入れる

<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

関連リンク Font Awesome Examples v4.7.0
Font Awesome v4.7.0

よく使うアイコン

<i class="fa fa-user" aria-hidden="true"></i>
<i class="fa fa-user-o" aria-hidden="true"></i>
<i class="fa fa-users" aria-hidden="true"></i>
<i class="fa fa-upload" aria-hidden="true"></i>
<i class="fa fa-download" aria-hidden="true"></i>
<i class="fa fa-video-camera" aria-hidden="true"></i>
<i class="fa fa-film" aria-hidden="true"></i>
<i class="fa fa-desktop" aria-hidden="true"></i>
<i class="fa fa-television" aria-hidden="true"></i>
<i class="fa fa-clock-o" aria-hidden="true"></i>
<i class="fa fa-calendar" aria-hidden="true"></i>
<i class="fa fa-pencil" aria-hidden="true"></i>
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
<i class="fa fa-sign-in" aria-hidden="true"></i>
<i class="fa fa-sign-out" aria-hidden="true"></i>
<i class="fa fa-sitemap" aria-hidden="true"></i>
<i class="fa fa-search" aria-hidden="true"></i>
<i class="fa fa-tag" aria-hidden="true"></i>
<i class="fa fa-undo" aria-hidden="true"></i>
<i class="fa fa-check-circle-o" aria-hidden="true"></i>
<i class="fa fa-check-square-o" aria-hidden="true"></i>
<i class="fa fa-envelope" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-map-marker" aria-hidden="true"></i>
<i class="fa fa-map" aria-hidden="true"></i>
<i class="fa fa-map-o" aria-hidden="true"></i>
<i class="fa fa-phone-square" aria-hidden="true"></i>
<i class="fa fa-phone" aria-hidden="true"></i>
<i class="fa fa-volume-control-phone" aria-hidden="true"></i>
<i class="fa fa-mobile" aria-hidden="true"></i>
<i class="fa fa-building" aria-hidden="true"></i>
<i class="fa fa-building-o" aria-hidden="true"></i>
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-info-circle" aria-hidden="true"></i>
<i class="fa fa-window-restore" aria-hidden="true"></i>
<i class="fa fa-folder-open" aria-hidden="true"></i>
<i class="fa fa-folder-open-o" aria-hidden="true"></i>
<i class="fa fa-file" aria-hidden="true"></i>
<i class="fa fa-file-o" aria-hidden="true"></i>
<i class="fa fa-flag" aria-hidden="true"></i>
<i class="fa fa-link" aria-hidden="true"></i>
<i class="fa fa-hand-o-right" aria-hidden="true"></i>
<i class="fa fa-bar-chart" aria-hidden="true"></i>
<i class="fa fa-line-chart" aria-hidden="true"></i>
<i class="fa fa-pie-chart" aria-hidden="true"></i>
<i class="fa fa-comment-o" aria-hidden="true"></i>
<i class="fa fa-comment" aria-hidden="true"></i>
<i class="fa fa-comments" aria-hidden="true"></i>
<i class="fa fa-play-circle" aria-hidden="true"></i>
<i class="fa fa-play-circle-o" aria-hidden="true"></i>
<i class="fa fa-subway" aria-hidden="true"></i>
<i class="fa fa-car" aria-hidden="true"></i>
<i class="fa fa-bus" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-plane" aria-hidden="true"></i>
<i class="fa fa-jpy" aria-hidden="true"></i>
<i class="fa fa-usd" aria-hidden="true"></i>
<i class="fa fa-eur" aria-hidden="true"></i>
<i class="fa fa-quote-left" aria-hidden="true"></i>
<i class="fa fa-quote-right" aria-hidden="true"></i>