※当サイトの記事には、広告・プロモーションが含まれます。

Font Awesomeを使う際に

Font Awesomeとは?

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

と公式サイトで説明されてました。

cssでカスタマイズが可能なベクタ形式(Illustratorなどで導入されていて、情報をベクトルで扱ってるので画像の劣化の心配がないらしいです。)のアイコンを使えるらしいっす。

導入方法として、

  • CDN(Contents Delivery Network)を利用
  • CSSファイルをダウンロードして利用

の2つの方法が一般的のようです。

CDNは、サーバーにあるものをネットワーク経由で使っているので、ネット環境がないと使えません。 

シーディーエヌ
 

CDNContents Delivery Network コンテンツデリバリネットワーク

CDNとは、ファイルサイズの大きいデジタルコンテンツネットワーク経由で配信するために最適化されたネットワークのこと。CDNを構築・運用し、企業などに有料で利用させるサービスコンテンツデリバリサービスCDS)という。 

 

Font Awesomeを使うための環境を準備

Font Awesomeの『Get Started』のページに行きます。

Get Started with Font Awesome

f:id:ts0818:20160112150640j:plain

CDNを利用する場合は、

『EASIEST: BootstrapCDN by MaxCDN』のソースをコピペして、<head>タグ内に貼り付けます。

(※font-awesome/4.5.0の数字の部分がバージョンなので、ここの数字により、扱えるアイコンが変わってくるようです。また、ローカル環境では、http:を省略しないようにしたほうが良いようです。https:で動かない場合は、http:で試してみるのも良いようです。)

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

CSSファイルをダウンロードして利用する場合は、 

『Home』の『Download』をクリックします。 

f:id:ts0818:20160112152433j:plain

以下のようなダイアログが表示されます。

『No thanks,just download Font Awesome』を選択します。

f:id:ts0818:20160112153712j:plain

ダウンロードされたフォルダ(font-awesome-4.5.0.zip)の構成は、

f:id:ts0818:20160112153713j:plain

 必要なのは、『font-awesome.min.css』ファイルと『fonts』フォルダです。

f:id:ts0818:20160112165124p:plain

(※『font-awesome.min.css』ファイルと『fonts』フォルダの位置関係(相対パス)が変わらないようにする必要があります。)

 

『Get Started』のページの『EASY: Default CSS』の手順を実行します。

f:id:ts0818:20160112150641j:plain

下記のような構造で、cssフォルダを作成し、その中にfont-awesome.min.cssファイルを入れていて、

f:id:ts0818:20160112165452j:plain

font-awesome.min.cssファイルを読み込む場合

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

を<head>タグ内に貼り付けます。

 

Font Awesomeを表示させてみる

Font Awesomeを表示させる方法は、

  • htmlタグ
  • cssの『:before』、『:after』要素で記述

の2パターンあるようです。

どちらの方法を使っても、cssで自由に色を変えたり、大きさを変えたりできます。

まずは、『Icons』のページに行きます。

f:id:ts0818:20160112150639j:plain

f:id:ts0818:20160112170411j:plain

使いたいアイコンをクリックします。

選択したアイコンのページが表示されます。

f:id:ts0818:20160112170811j:plain

htmlタグで表示させる場合

表示されたアイコンページの下部にある<i>タグをコピペして、表示させたい場所に貼り付けます。 

<i class="fa fa-shopping-cart"></i>

 

cssの:before、:after要素で表示させる場合

Unicode:〇〇』の〇〇の部分を使います。ここでは、『f07a』

f:id:ts0818:20160112170810j:plain

仮に、

<li class="shopping"><a href="">ショッピングカート</a></li>

のようなhtmlタグが組んであった場合、

css

li.shopping a:before {
  font-family: 'FontAwesome';  
  content: '\f07a'
}

とすると表示されます。

 

  FontAwesomeについて詳しくは下記サイトへ

フォントアイコンの使い方 (FontAwesome)

FontAwesomeをIllustratorPhotoshopなどAdobe系ソフトで使う方法

Adobe系ソフトは、フォントファイルおよび拡張子が「*.mmm」「*.pfb」「*.ttf」「*.fon」になっているものを読み込むそうです。

ダウンロードした『font-awesome-4.5.0.zip』の中の『fonts』フォルダの中に、『fontawesome.ttf』というファイルがあるので、そのファイルを移動します。

(※windows7で試してます。)

C:¥Program Files(x86¥Common Files¥Adobe¥Fonts

(※Fontsフォルダがない場合は作成します。)

に、『fontawesome.ttf』を移動します。

 

  詳しくは下記サイトへ。

【Adobe Illustrator】フォントの追加 at softelメモ

Illustrator が扱うフォントとフォントの数について

FontAwesome側

FontAwesomeの『Icons』のページの『cheatsheet』をクリックします。

f:id:ts0818:20160112175849p:plain

『Cheatsheet』のページが表示されます。

f:id:ts0818:20160112175934j:plain

f:id:ts0818:20160112175935j:plain

使いたいアイコンを選択してコピーします。普通に『Ctrl+C』でコピーできます。

f:id:ts0818:20160112175936j:plain

  よく使うアイコンの探し方について詳しくは下記サイトへ

良くあるメニュー・アイキャッチのアイコンに使えそうなFontAwesomeのまとめ | Root-013

 

Adobe系ソフト例:Illustrator

『新規ファイル』作成したら、『Ctrl+V』で貼り付けます。文字が対応してないとなるので、選択された状態のまま『書式(T)』>『フォント(F)』>『<FontAwesome>』を選択します。

f:id:ts0818:20160112181055j:plain

 

f:id:ts0818:20160112181053j:plain

無事、アイコンが表示されました。

f:id:ts0818:20160112181054j:plain

 

Font Awesomewindows7で使う方法

パソコン自体にフォントをインストールすると、パソコンにインストールしてるソフトで、インストールしたフォントが使えるようになるようです。

(※Adobe系ソフトでもパソコン自体にインストールしたフォントが使えます。ただ、パソコンにフォントをインストールすると容量が取られるという問題があるようです。)

安全なファイルと分かってる場合は、フォントファイル自体をダブルクリックするか、フォントファイルを選択した状態で右クリックし、『インストール(I)』を選択すると下記ウィンドウが表示されるので、『インストール(I)』をクリックします。

今回は、『FontAwesome.otf』(主にOSにインストールして使うタイプのものだそうです。)ファイルを選択しました。

f:id:ts0818:20160112174058j:plain

フォントが追加されたか確認するには、『スタート』>『コントロールパネル』を選択します。

f:id:ts0818:20160112195737j:plain

『デスクトップのカスタマイズ』を選択します。

f:id:ts0818:20160112195738j:plain

『フォント』を選択します。

f:id:ts0818:20160112195739j:plain

パソコンにインストールされてるフォントの一覧が表示されるので、確認できます。

f:id:ts0818:20160112195740j:plain

 

 

  Windows7にフォントをインストールする場合

フォントのインストール方法(Windows 7 の場合)

  Windowsにフォントをインストールする方法、詳しくは下記サイトへ

フォントをインストールまたはアンインストールする

  Macなどにフォントをインストールする方法は下記サイトへ 

[Photoshop]アイコンフォントをphotoshopやillustraterで簡単に使う方法。特に、Font Awesomeはチートシートが用意されていてカナリ便利。

今回はこのへんで。