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.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

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

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

no image

サイトのどこを見られているかを可視化出来る「User Heat」を試してみた♪

この記事は約 1 分で読めます。 「GoogleAnalytics」など様々なアクセス解析ツールがあります。 その中でとても興味深く、これからサイトを制作するのに役立ちそうな「User Heat」とい …

no image

ムームードメインで取得した独自ドメインをエックスサーバーで使う設定方法

この記事は約 1 分で読めます。「エックスサーバー」を利用する事が決まっていて、ドメインをどこで取得しようかな?と思った時、「エックスドメイン」という選択肢もあったのですが、今回は「ムームードメイン」 …

no image

スマホサイトの画像コピーガード対策

この記事は約 1 分で読めます。 スマホ向けのサイト制作の機会が増えました。 PC向けの時にいろいろとしていた画像コピーガード対策も、スマホ対応しなくてはならなくなってきました。 画面の長押しすると、 …

no image

WordPressで「ブルートフォースアタック」や辞書攻撃にあった時にやってみたこと。

この記事は約 1 分で読めます。 昨年(2013年8月)、ロリポップのレンタルサーバーでWordPressサイトへの改ざん事件がありました。 その後も、「ブルートフォースアタック」や辞書攻撃があってい …