こんにちは、キャスレーコンサルティングSD(システム・デザイン)部の青木です。
今回はFontAwesomeを使ってWebページにアイコンを表示してみようと思います。

FontAwesomeとは

FontAwesomeは商用でも無料で使用することができ、様々なユニークなアイコンを画像ではなく、
テキストとしてWebページ上に表示することができるWebアイコンフォントです。

テキストでの表示となるため、cssで自由に大きさや色を変更することができます。
また、FontAwesome自体に多数のアイコン表示機能が組み込まれており、
現時点で600種類以上のアイコンを簡単にWebページに表示することができます。

フォントのライセンスはSIL OFL 1.1、コードのライセンスはMIT Licenseとなっています。
http://scripts.sil.org/OFL
http://opensource.org/licenses/mit-license.html

FontAwesomeのダウンロードと準備

【FontAwesomeをダウンロード】

下記リンク先からFontAwesomeをダウンロードします。
http://fontawesome.io/

ダウンロードの際は
「No thanks, just download Font Awesome」を選択します
download

【必要ファイルの準備】

ダウンロードしたzipファイルを解凍し、cssフォルダ内のファイルとfontsフォルダ内のファイルを
対象サイトのcss,fontsフォルダにコピーしてください。
※cssとして使用するのはfont-awesome.min.cssなのでfont-awesome.cssはコピーする必要はありません。
※自分のcssフォルダとfontsフォルダもFontawesomeのzipと同じように、同じ階層に配置するようにしてください。

[例]
root
  ┗css
  ┗fonts

FontawesomeFileCopy

【FontAwesomeをHTMLにインポート】

HTMLに下記を記載しfont-awesome.min.cssをインポートします。
※ファイルのパスはカレントディレクトリによって異なります。

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

FontAwesomeアイコンの表示

FontAwesomeのサイトトップ画面から「icons」タグをクリックしアイコンの一覧から使用したいアイコンを選択します。
表示される<i>タグをコピーしHTMLソース上にペーストすることでアイコンを表示することができます。
iconsBtn

getIconCode

【アイコンの大きさを変える】

<i>タグのclass属性内に下記の記述を追加することでアイコンの大きさを変えることができます。

  • fa-lg
  • fa-2x
  • fa-3x
  • fa-4x
  • fa-5x
<i class="fa fa-rocket" aria-hidden="true"></i>
<i class="fa fa-rocket fa-lg" aria-hidden="true"></i>fa-lg
<i class="fa fa-rocket fa-2x" aria-hidden="true"></i>fa-2x
<i class="fa fa-rocket fa-3x" aria-hidden="true"></i>fa-3x
<i class="fa fa-rocket fa-4x" aria-hidden="true"></i>fa-4x
<i class="fa fa-rocket fa-5x" aria-hidden="true"></i>fa-5x

例えば、上記のように記述した場合は下記のように定義されたスタイルが適用されます。

.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}
.fa-2x {
  font-size: 2em;
}
.fa-3x {
  font-size: 3em;
}
.fa-4x {
  font-size: 4em;
}
.fa-5x {
  font-size: 5em;
}


fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

【アイコンの角度を変える】

<i>タグのclass属性内に下記の記述を追加することでアイコンの角度を変えることができます

  • fa-rotate-90       時計回りに90度回転
  • fa-rotate-180      時計回りに180度回転
  • fa-rotate-270      時計回りに270度回転
  • fa-flip-horizontal    水平方向に反転
  • fa-flip-vertical      垂直方向に反転

下記のスタイルが適用されます。

.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}
:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  filter: none;
}

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

【アイコンを回転させる】

<i>タグのclass属性内に下記の記述を追加することでアイコンの回転させることができます

  • fa-spin   2秒で1回転させる(時計回り)
  • fa-pulse  1秒で1回転させる(時計回り)※1回転を8ステップに分割して1ステップずつ動作する

下記のスタイルが適用されます。

.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}
.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}



【アイコンを重ねて表示する】

アイコンのクラスに下記を追加することでアイコンを重ねて表示することができます

  • アイコンの親タグ
    • fa-stack
  • アイコンを表示するのタグ
    • fa-stack-1x  アイコンの大きさを指定(親のと同じ大きさ)
    • fa-stack-2x  アイコンの大きさを指定(親の2倍の大きさ)
    • fa-inverse   アイコンの色を白にする

下記のスタイルが適用されます。

.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.fa-stack-1x,
.fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.fa-stack-1x {
  line-height: inherit;
}
.fa-stack-2x {
  font-size: 2em;
}
.fa-inverse {
  color: $fff;
}

fa-ban on fa-camera

アイコンを疑似要素で表示する

ここまではHTMLにタグを埋め込むことでアイコンを表示してきましたが、
今度はHTMLにタグを埋め込まずに、CSSの疑似要素を使ってアイコンを表示してみます。

【HTML】

<p class="iine">いいね</p>

【CSS】

.iine:before {
  font-family: 'FontAwesome';
  content: "\f087";
  margin-right: 5px;
}

 いいね

疑似要素のcontent属性に指定する値は下記を参照してください。
(アイコン名の横に表示されているUnicodeの値です)
http://fontawesome.io/cheatsheet/

※上記リンク内のUnicodeの値にある「&#x」を「\」(バックスラッシュ)に置き換えて使用してください
※また、アイコンをHTMLに直接埋め込む場合に「&#x」のまま使用します

またはfontawesomeのzipを解凍したcssフォルダ内のfont-awesome.cssを参照することでも
content属性に指定する値を確認することができます。

.fa-thumbs-o-up:before {
  content: "\f087";
}

Sass(Scss)でも表示してみる

※Sassの環境準備は下記に記載しています

【必要ファイルの準備】

FontAwesomeのzipファイル内のscssフォルダ内のファイルを任意のフォルダにコピーします。

FontAwesomeScssCopy

「style.scss」ファイルを新規に作成し、コピーしてきた「font-awesome.scss」をimportします。

createScss

※importの際拡張子の省略が可能なので「.scss」を省略しています

【style.scss】

@import "./font-awesome";

.iine:before {
  @include fa-icon;
  content: $fa-var-thumbs-o-up;
  margin-right: 5px;
}

content属性には表示したいアイコンのUnicodeの値を格納した変数を指定します。
(変数は_variables.scssファイル内に定義されています。)

【Scssファイルのコンパイル】

コマンドプロンプトで、作成したscssファイルのあるディレクトリに移動し、
下記コマンドでscssファイルをコンパイルし、cssファイルを作成します。
※「style.scss」部分にコンパイルしたいscssファイル名を指定
※「../css/scssStyle.css」部分に作成したいcssファイルのパスとファイル名を指定

$ sass --style expanded style.scss:../css/scssStyle.css

※下記コマンドでコンパイルすると今後scssファイルを保存した際に自動でコンパイルしてくれるので便利です

$ sass --style expanded --watch style.scss:../css/scssStyle.css

【HTMLで表示する】

コンパイルして作成されたcssファイルをHTMLに読み込みます。

<link rel="stylesheet" href="./css/scssStyle.css">

※コンパイル前のscssファイルでfont-awesomeを読み込んでいるため、
HTMLにfont-awesome.min.cssを読み込む必要はありません。

以上でScssでもFontAwesomeのアイコンを表示することができます。

補足:【Sassの環境準備】

[Rubyのインストール]

SassをダウンロードするのにRubyが必要なので、まず下記リンク先からRubyをダウンロードし、インストールします。
http://rubyinstaller.org/downloads/

※インスト―ルの際に下記にチェックを入れてインストールしてください
・「Rubyの実行ファイルへ環境変数PATHを設定する」
・「.rbと.rbwファイルをRubyに関連づける」

下記コマンドでRubyがインストールされたことを確認します。

$ ruby -v

Rubyのバージョン確認ができればインストールは成功しています。

[Sassのインストール]

まず下記コマンドでSassのインストール時に使う「Rubygems」を最新状態にします

$ gem update --system

下記コマンドでSassをインストールします

$ gem install sass

下記コマンドでSassがインスト―ルされたことを確認します

$ sass -v

Sassのバージョンが確認できればインストールは成功しています。

以上でSassの環境準備は完了です。

おわりに

今回はFontAwesomeを使いアイコンを表示してみましたが、アイコンを表示させるライブラリは
FontAwesome以外にも下記のようなものもあるので、お気に入りのアイコンがあるライブラリや、
自分にとって使いやすいライブラリを探してみるのも面白いかもしれません。


  • Entypo
    Entypo

  • WebHostingHub
    WebHostingHub Glyphs

  • FoundationIcon
    Foundation Icon Fonts 3

  • Genericons
    Genericons

  • flatIcon
    flaticon

  • iconMoon
    IcoMoon

今回の内容は以上となります。
最後までお読み頂き、ありがとうございました。


はじめまして、技術ブログ初投稿のキャスレーコンサルティングのSD(システム・デザイン)部・瀬戸口です。
フロント技術とデザインが好きなエンジニアです。よろしくお願いします。

今回は、HTML5で新たに実装された機能「フォームバリデーション」について、少し触ってみたのでご紹介します。
長年HTML4に慣れ親しんだ身としては、HTML5でフォームバリデーションができる!と知った時、とても感動しました。
是非実務にも取り入れたいと思ったので、どういった使い方をすると良さそうか、また、何に注意すべきかを検証してみました。

(続きを読む…)



  • Profile
    キャスレーコンサルティングの技術ブログです。
    当社エンジニアが技術面でのTips、技術系イベント等についてご紹介いたします。
  • CSV社長ブログ
  • チーム・キャスレーブログ