Webの記録

無料で簡単!アイコンフォント「Font Awesome」を使ってみた

投稿日:2014年12月10日 更新日:

この記事は約 12 分で読めます。

fontawesome

先日SNSアイコンをつけた時に、アイコンフォント「Font Awesome」を使用しました。

無料で、初めてでも簡単に使えるアイコンフォント「Font Awesome」。
いろいろな使い方があるので、ちょっとメモしました。

※2014年11月29日投稿の記事「WordPressでシンプルな自作SNSボタンを設置してみた」で書けなかったので、ちょっと補足記事です。


「Font Awesome」の特徴など

  • 無料で手軽に使える
  • 種類が豊富
  • テキストなので、画像より表示を軽くすることができる
  • 拡大・縮小してもキレイな表示
  • アイコンのデザインを変更するのも、クラス名を変えるだけ
  • cssで手軽に、色などコントロールできる
  • IE8以上のブラウザで表示(IE7で表示させるには別途cssなどで対応が必要)
  • Bootstrapと一緒に使うこともできる


「Font Awesome」の導入準備

ダウンロードしたファイルを使う場合

まずは、Font Awesomeから、ファイルをダウンロードします。

Font-Awesome

ダウンロードしたファイルの構成はこんな感じでした。

fontawesomeファイル構成

このファイルの中から、「fonts」の中身全部と、「css」フォルダーの中の「font-awesome.css」か「font-awesome.min.css」をそのままコピーして使います。(sassやlessを使う場合のファイルもあります)

これらのファイルを用意した後、htmlのheadでcssを読み込ませます。

<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">


パスに注意!フォルダ構成が変わっていると、cssの以下の部分でちゃんとパスを変更しておいてください。

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}


CDNを使う場合

CDNを使うとダウンロードせずにすぐに使えるので便利です。headに以下の1行を加えるだけ!

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


アイコン設置方法

アイコンの種類は「icons」の中で、たくさん見ることができます!

Font-Awesome

気に入ったアイコンが見つかったら、クリックします。

Font-Awesome

アイコンの画像下にちゃんとソースコード表示されているので、そのまま使えばアイコン表示されます。(クラス名だけ使えば大丈夫です)

Font-Awesome

使い方いろいろ

Examples」のページを見ると、たくさん使い方を解説しています。その中から抜粋で紹介します!

※以下のコードでの表示サンプルも作ってみました。


cssで色をコントロールしてみた

fontawesome_icon

<i class="fa fa-facebook-square fa-2x"></i>
<i class="fa fa-google-plus-square fa-2x"></i>
<i class="fa fa-tumblr-square fa-2x"></i>
<i class="fa fa-twitter-square fa-2x"></i>
サイズも「fa-●」で変えられます

fontawesome_icon

<p><i class="fa fa-facebook-square fa-lg"></i>fa-lg</p>
<p><i class="fa fa-facebook-square fa-2x"></i>fa-2x</p>
<p><i class="fa fa-facebook-square fa-3x"></i>fa-3x</p>
<p><i class="fa fa-facebook-square fa-4x"></i>fa-4x</p>
<p><i class="fa fa-facebook-square fa-5x"></i>fa-5x</p>


ナビゲーション用にもアイコン

アイコン表示幅を統一させるために「fa-fw」をクラス名につける

fontawesome_icon

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>


リストで使う時

ulのクラスを「fa-ul」、liのクラスを「fa-li」を使う

fontawesome_icon

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>


枠を付ける

クラスに「fa-border」をつけると、枠をつけられる。
クラスを「pull-left「pull-right」を入れると、回り込みをする

fontawesome_icon

<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
<p>...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.</p>
<p>...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.</p>


回転アイコン

クラスに「fa-spin」を入れると、ぐるぐる回転する

fontawesome_icon

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
アイコンを回転・反転させる

クラスに「fa-rotate-90」「fa-rotate-180」「fa-rotate-270」「fa-flip-horizontal」「icon-flip-vertical」入れると、90度ずつ回転・反転させられる

fontawesome_icon

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical


アイコンを重ねて使える

親クラスに「fa-stack」。中身のクラスに(大きいアイコン)「fa-stack-2x」、(小さいアイコン)「fa-stack-1x」

2つ重ねたアイコン、それぞれ別にcssで色を付けることができます♪

fontawesome_icon

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<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>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera


クラスを指定するだけで、簡単に使えるのでとても便利です!

以前はアイコンを自作していたのに、その手間も省けてキレイに軽く表示されるのなら、どんどんこういうものは利用した方が良いですね!


参考サイト


余談。

日本独自のサービスのアイコンなどが必要な時は、「Ligature Symbols」が便利かもしれません。

-Webの記録
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

WebサイトのURLを変更した後 .htaccessの記述して新しいURLに転送してみる

この記事は約 2 分で読めます。 ずっと運営していたサイトのURLを都合により変更(ファイルを移動)させてしまった時、ブックマークから訪問してくれた人が困らないように新しいURLへ転送する事が必要にな …

no image

レスポンシブサイト制作にチャレンジ。

この記事は約 1 分で読めます。最近、気になっているのが「レスポンシブWebサイト」。 1つのHTMLで、スマートフォンやタブレットなど小さな画面とパソコンなどの大きな画面で見た場合と見た目を切り替え …

no image

ブラウザ別キャッシュクリア(一時ファイルの消去)の方法♪

この記事は約 1 分で読めます。 以前、Webサイトの更新作業をした後に、お客様から「前と表示が変わってない」と言われたことがあります。 キャッシュという、一度表示したページを早く表示するために一時フ …

no image

WordPressがいきなり真っ白になった時。

この記事は約 1 分で読めます。 WordPressでこのサイトを作って、約2年になります。 地道に継続していて、当たり前に使っていたのに・・・。 ある日、ブラウザに表示させてみると・・・真っ白になっ …

no image

WordPressプラグイン「WP-Copyright-Protection」で右クリック・ドラック禁止でコピーガード

この記事は約 1 分で読めます。 以前、「右クリック禁止で画像のコピーガード」など、画像のお持ち帰りを禁止したい措置について記事を書きました。 3年ほど前の記事にもかかわらず、今も毎日閲覧数が多いです …