Font Awesomeを使おう・Webアイコンの使い方【CSS】

Font Awesomeを使おう・Webアイコンの使い方【CSS】

Font Awesomeのバージョンは現在「Font Awesome 5」が最新版として利用できます。(2018年12月時点)

Font Awesome 5は、Web上で文字と同じように扱うことができるアイコンなので、拡大しても画質が劣化しませんし、色やサイズも自由に変更できます。

このFont Awesome 5の使い方を解説していきます。

 

「Font Awesome 5」の見本です。

Font Awesome

 

Font Awesome 5とは?

アイコンを文字として扱うことができるツールです。画像ではないので、サイズを変更しても画像の劣化(ボケる)こともありませんし、色やサイズもCSSで自由に変更できる便利なツールになります。

しかし、提供されているサイトは英語なので英語が得意でない人には取っ付きにくいかもしれません。

そこで、詳しく使い方を解説しますのでブログ等で使ってみて下さい。

 

「Font Awesome 5」を使ったサンプルです。

Font Awesome 5の使い方

Font Awesome 5を使うには2種類の方法があります。

  • CDNを利用する方法
  • データをダウンロードして利用する方法

 

CDNを利用する方法

CDNを利用する方法とは、サーバーからフォントを読み込んで、自分のブログ等に表示する方法です。

僕は、こちらを利用しており、CDNを利用する方法をオススメします。

 

手順1:コードをコピーする

まずは、上記のコードをコピーして下さい。(2018/12/16で最新コード)

最新のコードをコピーするには公式サイト に行って、コードを取得します。

 

「Start」のページでコードをコピーします。

Font Awesomeを使おう

 

 

手順2:<head>~</head>に貼り付け

手順1でコピーしたFont Awesome 5のコードを<head>~</head>タグ内に貼り付けます。

WordPressの場合は、「ダッシュボード」→「外観」→「テーマの編集」右側のサイドバーから「header.php」に貼り付けます。

Font Awesome 5

 

データをダウンロードして利用する方法

公式サイトからデータファイルをダウンロードします。

Download

Font Awesome 5

緑枠の「Download Font Awesome Free」をクリックしてダウンロードします。

fontawesome-free-5.3.1-web.zip」がダウンロードされますので解凍します。

 

手順1:fontawesome.min.cssをアップロード

解凍して「CSS」フォルダ内にある、以下の図の「fontawesome.min.css」を見つけます。

Font Awesome 5

fontawesome.min.css」を見つけたら、サーバーへアップロードします。

 

手順2:webfonts内のファイルをアップロード

解凍したファイルの中の「webfonts」内のふぁいるをサーバーへアップロードします。

Font Awesome 5

 

アップロードする場合は、css内の「fontawesome.min.css」と、「webfonts」の位置関係を変えずにアップロードして下さい。

※相対パスが変わらないようにすること

 

手順3:<head>~</head>でスタイルシートの読み込み

他のスタイルシートを読み込む場合と同じで「fontawesome-all.min.css」を読み込みます。

これも<head>~</head>タグ内に記述します。

 

Font Awesome 5の使い方

Font Awsome 5 Iconsページ に行って、使いたいアイコンを探します。

 

アイコンの探し方

Font Awsome 5 Iconsページ で「Free」にチェックを入れてから検索します。有料の「PRO」をご利用の方は「Free」にチェックする必要はありません。(有料は$60です)

 

手順1:全てのアイコンを表示させる

Font Awesome 5

手順2:特定のアイコンを表示させる

特定のアイコンを検索する場合は「link」などの文字列を入れて検索します。

Font Awesome 5

手順3:コードを取得する

使いたいアイコンが見つかったらアイコンをクリックします。

下の図の「<i class・・・」をクリックするとコードがコピーされます。

Font Awesome 5

 

アイコンを表示させる

コピーしたコードをHTMLの表示させたい場所に貼り付けます。

HTML貼り付け例HTML <i class=”fas fa-heart”></i>
Icon 

WordPressで貼り付ける場合

コードを貼り付ける場合は、テキストモードにして貼り付けて下さい。

Font Awesome 5

アイコンの大きさを変更する

アイコンは大きさを変更することができます。

fa-2xfa-3x・・・のクラスを追加することでサイズを変更でき、fa-10xまで対応できます。

HTML貼り付け例HTML <i class=”fas fa-heart fa-3x”></i>

Icon 

アイコンの色を変更する

アイコンの色を変える場合は、CSSで変更します。

WordPressの方はテーマの子テーマに以下のCSSを追加して下さい。

.my-gray のgray部分は好きな名前でOKです。

 

HTMLは以下のように書きます。

 

色を変えたアイコンの例

 

サイズと色を変えた例      

 

アイコンの幅を揃える(等幅サイズ)

アイコンの種類によって、幅が一定しませんので、一定させたいときは「fa-fw」を使います。

 

等幅OFF
アイコン1
アイコン2
 アイコン3

 

等幅ON
アイコン1
アイコン2
 アイコン3

CSSは以下のように書きます。fa-fwクラスを追加します。

 

アイコンを回転させる

アイコンを回転させる場合は「fa-rotate」を使います。

fa-rotate-90 fa-rotate-180 fa-rotate-270 を追加します。

 

アイコンの回転例

 

アイコンを反転させる

アイコンを反転させるには(鏡に写ったように)「fa-flip-horizontal」と「fa-flip-vertical」を使います。

  • fa-flip-horizontal(水平反転)
  • fa-flip-vertical(垂直反転)

 

アイコンの反転例
  

 

アイコンを連続回転(スピン)させる

アイコンをスピンさせるには「fa-spin」を使います。

 

アイコンのスピン例
  

 

アイコンに枠線をつける

アイコンに枠線を付けるには「fa-border」を使います。

これは、あまり活躍の場がないかもしれませんね^^;

 

アイコンに枠線を付けた例
 

まとめ

Font Awesome 5のWebアイコンは、文字として扱えワンポイントで使う場合に非常に便利です。

かなりのアイコンが用意されていますので、使用用途によって使い分け、アイディア次第で訪問者の目にとまるブログを作りことができます。

この機会にFont Awesome 5を使ってみては如何でしょうか。

 

この記事が気に入ったら
いいね ! しよう

CSSカテゴリの最新記事