こんにちは、キャスレーコンサルティング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/
【必要ファイルの準備】
ダウンロードしたzipファイルを解凍し、cssフォルダ内のファイルとfontsフォルダ内のファイルを
対象サイトのcss,fontsフォルダにコピーしてください。
※cssとして使用するのはfont-awesome.min.cssなのでfont-awesome.cssはコピーする必要はありません。
※自分のcssフォルダとfontsフォルダもFontawesomeのzipと同じように、同じ階層に配置するようにしてください。
[例] root ┗css ┗fonts
【FontAwesomeをHTMLにインポート】
HTMLに下記を記載しfont-awesome.min.cssをインポートします。
※ファイルのパスはカレントディレクトリによって異なります。
<link rel="stylesheet" href="./css/font-awesome.min.css">
FontAwesomeアイコンの表示
FontAwesomeのサイトトップ画面から「icons」タグをクリックしアイコンの一覧から使用したいアイコンを選択します。
表示される<i>タグをコピーしHTMLソース上にペーストすることでアイコンを表示することができます。
【アイコンの大きさを変える】
<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)でも表示してみる
【必要ファイルの準備】
FontAwesomeのzipファイル内のscssフォルダ内のファイルを任意のフォルダにコピーします。
「style.scss」ファイルを新規に作成し、コピーしてきた「font-awesome.scss」をimportします。
※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以外にも下記のようなものもあるので、お気に入りのアイコンがあるライブラリや、
自分にとって使いやすいライブラリを探してみるのも面白いかもしれません。
今回の内容は以上となります。
最後までお読み頂き、ありがとうございました。