おやじの独り言

便利な機能アイコンフォント”FontAwesome” の設定方法

【保存版】

WEBアイコンフォントとは?



ウェブページ上で文字と同じように表示できるアイコンのこと。

使い勝手のよさは
画像でアイコンを貼るのと違い、拡大してもぼやけない
色もサイズも簡単に変えることができる



設定手順

http://fontawesome.io/
をダウンロード

fontawesomeトップページ

fontawesomeのトップページ翻訳済み

コードをコピーして貼り付け
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

これをコピーして<head>〜</head>の中に貼り付ける
わからなければ、</head>の前に貼り付けておく。

※最新版は画面で確認

貼り付け位置

WordPress:[ダッシュボード]⇒[外観]⇒[テーマの編集]⇒右側のバーの[header.php] この中の</head>直前に貼り付けでok

これで設定は完了。
こんな画面が出てくる。

webアイコンサンプル画像

webアイコンサンプル

目次に戻る

Font Awesomeの使い方

文字入力でアイコンがポンっと出てくるときとても感動します。
あまりpcの知識がなかったり、触り慣れていない人だと余計感じます。
事実私がそうでした。

表示したいアイコンのコードをコピーする
アイコンフォトコード選択画像

アイコンフォトコードをコピーする

この位置をコピーします。

コピーはしっかりとします。アイコンが表示されない場合など原因を探すのに手間がかかります!

アイコンを表示させたい位置に貼付け
例えばこのようなコードをテキストに貼り付けると
<p><i class="fa fa-tasks" aria-hidden="true"></i>表示はこうなります。</p>

表示はこうなります。

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

i class=”〜”内に書くことでサイズを大きくする。

fa-lg (1.333…倍)
fa-2x (2倍)
fa-3x (3倍)
fa-4x (4倍)
fa-5x (5倍)

もしくは

<span style=”font-size:〇px;”>
</span>

アイコンフォントは文字なので文字を大きくするイメージ
目次に戻る

アイコンの色を変える

アイコンの色を変えるときには、iタグに好きな名前のclassを追加し、それに対してCSSで色を指定します。

<i class="fa fa-tag fa-gray"></i>
<i class="fa fa-tag fa-skyblue"></i>
<i class="fa fa-tag fa-orange"></i>
HTMLでこのように表示します

続いて

.fa-gray {color: gray}
.fa-skyblue {color: skyblue}
.fa-orange {color: #fecb81}

CSSでこのように標記すると




このようになります。

目次に戻る

回転させる

fa-spinというclass名を追加するだけでアイコンをくるくると回ります。

<i class=”fa fa-cog fa-spin” aria-hidden=”true”></i>
このように標記すると

クルクル回ります。

目次に戻る

アイコンを線で囲う

classにfa-borderを足すとアイコンまわりに線をひくことができる。

<i class=”fa fa-cog fa-border ” aria-hidden=”true”></i>
このように標記すると

アイコンのまわりを線で囲んでます。

目次に戻る

アイコンフォントは結構役に立ちます。
お気に入りに追加する価値ありです。