Font Awesomeの使い方

便利なアイコンフォント「Font Awesome」の使い方について説明してみます。

ダウンロード形式で設置する方法

まずは「Font Awesome」をダウンロードする為に次のページを開きます。
Download Font Awesome Free or Pro for the Web or Desktop

Font Awesome のダウンロード
  1. 上述のサイトを開き、左の手順に沿って、zipファイルをダウンロードします。
解凍後のフォルダ、ファイル一覧
  1. ダウンロードしたファイルを解凍すると左のようなフォルダ、ファイルが作成されます。
  2. これらすべてのフォルダやファイルを丸ごと、使用したいフォルダ内にコピーします。
    (親フォルダを指定し、コピーしたほうが楽ですし、管理しやすくなります。)

Font Awesome の css、あるいはJS を組み込む

cssフォルダの表示
jsフォルダの表示

css」フォルダ内にある「all.min.css」をHTMLに埋め込みます。

ファイルパスは、ご自分のサイトに合わせて変更してください。

 


あるいは、「js」フォルダ内にある「all.min.js」をHTMLに埋め込みます。

ファイルパスは、ご自分のサイトに合わせて変更してください。

HTMLでアイコンとして使用する方法

Font Awesome」のサイトで、アイコン取得の為のページを表示します。
Icons | Font Awesome

アイコンを表示する為のソースコードを取得する

HTMLソースの取得
HTMLソースの取得

前述のページから取得したいアイコンをクリック後、表示されたHTMLソースをクリックすると、HTMLソースが勝手にコピーされます。

上述のアイコンを表示させたい時の記述方法は、次のようになります。

 

【htmlのソースコード】

【表示サンプル】

CDN形式を使う場合

Font Awesome のCDN形式

Font Awesome のCDNはこちらにあるようです。
font-awesome – Libraries – cdnjs

使い方としては、まずCDNをHTMLに組み込む必要があります。

次に表示したいアイコンをHTMLに記述する必要があります。
※こちらについては前述の「ダウンロード形式」と同じです。

【htmlのソースコード】

【表示サンプル】

前の記事

jQueryの使い方のポイント

次の記事

open-iconicについて