Font Awesomeを活用してアイコンを効果的に使うには
WEBアイコンを活用するにはFont Awesomeが便利です。
有料と無料が会って有料のほうが遥かにたくさんのアイコンを使うことができますが。
とりあえずは無料で試してみて。
そこから必要があれば有料版に移行すれば良いと思います。
有料版と言っても一回60ドル払えばずっと使えますので。
使用頻度が高い方には有料版のほうがおすすめ^^;
画像をクリックするとFont Awesomeのページに飛びます。
記事を書いているときのバージョンは5.8.2です。
それでトップページの上の方で無料か有料を選ぶことができますが。
英語で書かれているためにアイコンの場所がわかリにくいという方がいらっしゃったので。
簡単に説明しておきます。
アイコンにはいくつかのクリックする場所があるんですが。
とりあえず先の画像の一番下の下のバージョンが書かれている隣に1,515 Free Iconというところがありますので。
そこをクリックすると無料で使えるすべてのアイコンが表示してあるページに行くことができます。アイコンをよく使う方はこのページをブックマークしておくと良いです。
このページですね。
そこにあるアイコンのいずれかをクリックすると
例えば以下のような画面が出てきまして。
無料の場合は灰色のアイコンだけが取得可能です。
それでCSSには左上の以下の部分、アイコンのコードを貼り付けます。
<h1>
<i class="fab fa-500px"></i>インコは可愛いよ
</h1>
それともう一つ下準備がありますので。
それを行っていれば以下のように表示されます。
アイコンを貼り付けるための下準備
ただしこれが有効になるためには下準備が必要です。
アイコンをサーバーに直接読み込む方法と外部においてあるアイコンを呼び出すやり方があります。
一般に使われるのはCDNというもので。
外部の（ここではFont Awesome）専用のサーバー上にあるアイコンデータリンクを張って
自分のWebサイトに表示させる仕組みです。
これだとアイコンをダウンロードして自分のサーバーにアップロードしなくても使えますし。
アイコンが増えたからと言っていちいちダウンロードする必要がありませんので楽です。
今記事ではCDNでアイコンを表示させてみます。
その場合。
CSSのときと同じ様にアイコンを保存してある場所に対してリンクを貼らなくてはなりません。
リンクについてはFont Awesomeのサイトに指定しててありますのでそれをブログやWebサイトの<head>タグの中に貼り付けます。
先程のトップページのStart Using Freeのボタンをクリックすると以下のページが出てきます。
そこに置いてあるリンクをコピーし貼り付けるわけです。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
WordPressや無料ブログでは場所が決まっています。
例えばWordPressであれば
[ダッシュボード]⇒[外観]⇒[テーマエディター]
⇒右側のバーの[header.php]に行き<head>タグ内に貼り付けます。
今回は記事のhtml に直接貼り付けてみました。
その上でアイコンのコードを好きなところに貼り付けただけで
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="external file.css">
<title>鳥は可愛い</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>
<body>
<h1>
<i class="fab fa-500px"></i>インコは可愛いよ
</h1>
</body>
</html>
こんなふうになるというわけです。
アイコンの大きさを変えたり色を変えたり、様々変化させる方法
アイコンは決まった色や大きさでなくてはいけないというわけではなく。
CSSを使って様々に変えていくことができます。
アイコンの大きさを変える
大きさを変えるには以下のコードをi class="〜"内に書きます。
定番
fa-lg (1.333…倍)
fa-2x (2倍)
fa-3x (3倍)
fa-4x (4倍)
fa-5x (5倍)
実際にたとえば爆弾のアイコンをHTMLに記述してみます。
<p><i class="fas fa-bomb fa-lg">1.333…倍</i></p> <p><i class="fas fa-bomb fa-2x">2倍</i></p> <p><i class="fas fa-bomb fa-3x"></i>3倍</p> <p><i class="fas fa-bomb fa-4x"></i>4倍</p> <p><i class="fas fa-bomb fa-5x"></i>5倍</p>
すると以下のようになります。
1.333…倍
2倍
3倍
4倍
5倍
大きさを自分で決める場合
上記に該当しない大きさのアイコンを設置したい場合には
fa-lgなどの代わりに自分で名前をつけてCSSでサイズを指定することができます。
例えばHTMLが以下のように記述されている場合。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="external file.css">
<title>鳥は可愛い</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>
<body>
<h1>
<i class="fas fa-crow big"></i>インコは可愛いよ
</h1>
<p><i class="fas fa-crow small"></i>でもうんちを所構わずするからそれが問題だね</p>
</body>
</html>
その前に繰り返しになりますが。
headタグ内にアイコンが置いてある場所のリンクを貼る必要があります。
WordPressの場合は全体に効果が及ぶような場所にリンクを貼り付けましたが。
先程のHTML の記述はエディタに書き込んでいますので。直接そのページにリンクを貼っています。
その上でアイコンのコードの先ほどfa-2x などと記述した場所に自分で目印を付けます。
例えばclassにbig と small という名前を付けました。
<h1>
<i class=”fas fa-crow big“></i>インコは可愛いよ
</h1>
<p><i class=”fas fa-crow small“></i>でもうんちを所構わずするからそれが問題だね</p>
その上でCSSに以下のように記述をし。
アイコンの大きさを指定します。
大きいやつは文字標準の8倍、小さいものは2倍にしました。
.big{
font-size:8em;
}
.small{
font-size: 2em
}
すると以下のように表示されます。
アイコンの色を変える
アイコンの色を変えるときには大きさを決めるときと同じく。
iタグに好きな名前のclassを追加し、それに対してCSSで色を指定します。
先程の記述で大きさにプラスして色を指定してみます。
.big{
color: red;
font-size:8em;
}
.small{
color: green;
font-size: 2em;
}
すると以下のようにブラウザ表示されます。
表示角度を変えたり反転させたり線で囲う
表示角度を変える
fa-rotate-○を加えるだけです。
○には角度を入れます。
先ほどのHTMLにfa-rotate-○を加えてみます。
上のアイコンだけ90度回転するようにしてみました。
<h1>
<i class="fas fa-crow fa-rotate-90 big"></i>インコは可愛いよ
</h1>
<p><i class="fas fa-crow small"></i>でもうんちを所構わずするからそれが問題だね</p>
すると以下のようにブラウザ表示されます。
更に下の小さいアイコンを180度させると
<h1>
<i class="fas fa-crow fa-rotate-90 big"></i>インコは可愛いよ
</h1>
<p><i class="fas fa-crow fa-rotate-180 small"></i>でもうんちを所構わずするからそれが問題だね</p>
以下のようにブラウザ表示されます。
反転させる
以下をiタグに加えるだけです。
fa-flip-horizontal：水平方向に反転
fa-flip-vertical：垂直方向に反転
先程の機銃の続きで大きいアイコンを水平方向に反転させてみます。
<h1>
<i class="fas fa-crow fa-rotate-90 fa-flip-horizontal big"></i>インコは可愛いよ
</h1>
<p><i class="fas fa-crow fa-rotate-180 small"></i>でもうんちを所構わずするからそれが問題だね</p>
すると以下のようにブラウザ表示されます。
次に下の小さなアイコンは垂直反転させてみます。
<h1>
<i class="fas fa-crow fa-rotate-90 fa-flip-horizontal big"></i>インコは可愛いよ
</h1>
<p><i class="fas fa-crow fa-rotate-180 fa-flip-vertical small"></i>でもうんちを所構わずするからそれが問題だね</p>
ブラウザ表示は以下。
アイコンを線で囲う
fa-borderを足すだけです^^;
上の大きなアイコンだけ囲ってみます。
<h1>
<i class="fas fa-crow fa-rotate-90 fa-flip-horizontal fa-border big"></i>インコは可愛いよ
</h1>
<p><i class="fas fa-crow fa-rotate-180 fa-flip-vertical small"></i>でもうんちを所構わずするからそれが問題だね</p>
ブラウザ表示は以下。
アイコンを重ね合わせる
divタグやspanタグで親の要素ブロックを作り。
それにidやclassでfa-stackと名前をつけます。
そしてその中にアイコンのコードを書き、
fa-stack-1xとかfa-stack-2xで順番を指定します。
例えば以下のような感じです。
りんごと鳥のアイコンでやってみました。
<div class="fa-stack">
<i class="fas fa-apple-alt fa-stack-1x big"></i>
<i class="fas fa-crow fa-stack-2x small"></i>
</div>
アイコンのコードに順番を決めるfa-stack-1xとかfa-stack-2xを加えます。
また色や大きさをCSSで指定したいのでそれぞれコードにbigとsmallという名前をつけました。
CSSは以下。
りんごのアイコンの色は朱、大きさを8em.
鳥の色は緑。起きさを4emとしました。
.big{
color: red;
font-size:8em;
}
.small{
color: green;
font-size:4em;
}
ブラウザ表示は以下。
ツイッターの鳥のアイコンを加えてfa-stack-2xと二番目に追加して加えてみると
<div class="fa-stack">
<i class="fas fa-apple-alt fa-stack-1x big"></i>
<i class="fas fa-crow fa-stack-2x small"></i>
<i class="fab fa-twitter fa-stack-2x"></i>
</div>
こんな感じでブラウザ表示されました。
アイコンの間隔を空ける
５つアイコンを並べてみます。
HTMLは以下。
<p><i class="fab fa-500px"></i>インコは可愛い</p> <p><i class="fas fa-adjust"></i>インコは可愛い</p> <p><i class="fab fa-adn"></i>インコは可愛い</p> <p><i class="fas fa-female"></i>インコは可愛い</p> <p><i class="fab fa-adobe"></i>インコは可愛い</p>
この場合４番だけ不揃いですので。
その修正で一番簡単なのはアイコンコードの後に半角スペースを入れることです。
これでテキストは一直線に揃いました。
ただアイコンが端っこに寄っています。
きれいに並べるためには
fa-fw
というクラスを追加で記述するときれいにアイコンが真ん中にきます。
先程のように半角スペースは入れずに４番めアイコンのクラスに
fa-fw
を入れてみます。
<p><i class="fab fa-500px"></i>インコは可愛い</p> <p><i class="fas fa-adjust"></i>インコは可愛い</p> <p><i class="fab fa-adn"></i>インコは可愛い</p> <p><i class="fas fa-female fa-fw"></i>インコは可愛い</p> <p><i class="fab fa-adobe"></i>インコは可愛い</p>
すると以下のようにブラウザ表示されます。
４番目の水色の枠は見やすくするためにこちらで入れたもので、実際にブラウザに表示されているわけではありません^^;
アイコンをアニメーションで動かす
アニメーションの中にはコードにclass名を書き込むだけで動くものがあります。
例えばくるくると回転させる場合です。
fa-spin
というクラスを書き込むだけです。
先程のHTMLの一番上のアイコンコードにfa-spinを追加してみます。
<p><i class="fab fa-500px fa-spin"></i>インコは可愛い</p>
すると以下のようになります。
『Font Awesome Animation』という専用のスタイルシートを読み込むことで
他にもたくさんのアニメーション効果を表示ができる様になります。
以下をheadタグに加えます。
これをまずしないとanimatedで示されるclassが効きません
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />
これで動かせるアニメーションアイコンのclassには以下のようなものがあります。
これは
というページをキャプチャしてGIFにしたものなんですが
On DOM lordは常にアイコンが動いている状態を表します。
<i class=”fab fas fa-wrench faa-wrench animated“></i>
というようなコードで記述をします。
この例で行くとFont Awesome Animation
のwrenchアイコンの場所にあるコード
にアニメーションのclass名を加えたものです。
つまり
<i class=”fab fas fa-wrench faa-wrench animated“></i>というふうに。
選んだアイコンコードの中に動き方を指定するために〇〇animatedというアニメーションのclassを付け加えます。
5倍の大きさで記述をし
<i class="fab fas fa-wrench faa-wrench animated fa-5x"></i>
表示してみると以下のようになります。
ずっと動き続けています。
On hoverはアイコンにカーソルを載せたときのみ動きます。
hoberは空中に停止する、という意味で、この場合on hoberはカーソルがアイコンの上にある状態を指します。
カーソルがアイコンの上にあるときだけアイコンが動く状態にするということです。
このようにするには先程のアニメーションをさせるためのclass,faa-wrench animatedなどの後ろにあるanimatedを
animated-hover
に変更するだけです。
先程のレンチに-hoverを加えてみます。
<i class=”fab fas fa-wrench faa-wrench animated-hover fa-5x“></i>
見やすいようにアイコンの大きさを5倍に指定してあります。
以下の↓アイコンにカーソルを当ててみてください。動き始めます。
On parent hoverは親要素にカーソルを合わせたときだけアイコンが動きます。
<p class="faa-parent animated-hover"> <i class="fab fas fa-wrench faa-wrench fa-5x "></i> ここにカーソルを当てたときだけアイコンが動くよ^^; </p>
ます親要素であるタグに以下のような記述を行います。
<タグ class=”faa-parent animated-hover”>
今回はpタグなので以下のようになります。
<p class=”faa-parent animated-hover”>
小要素のアイコンコードには動きを指定するclass を書き込みますが。
その際「faa-◯◯」というclass名だけ追加し、「animated」はつけません
例えばfaa-wrench animated というアニメーションの動きを指定するclassだと。
animatedを取って
<i class=”fab fas fa-wrench faa-wrench fa-5x “></i>
とします。
するとアイコンか「ここにカーソルを当てたときだけアイコンが動くよ^^;」という
テキストにカーソルを合わせるとアイコンが動きます。↓
ここにカーソルを当てたときだけアイコンが動くよ^^;
アイコンのアニメーションのまとめ
①くるくると回転させる場合にはアイコンコードにfa-spinを入れるだけで良かったんでしたね。
<p><i class="fab fa-adn fa-spin fa-5x "></i>fa-spinを入れるだけでアイコンが回転するよ</p>
fa-spinを入れるだけでアイコンが回転するよ
他のアニメーションで動かしたい場合にはまずheadタグに以下のようなリンクを貼る仏ようがあるんでしたね。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />
そしてアニメーションには15種類3パターンが有るんでした。
常にアイコンのアニメーションが動いている状態にするには
選んだアイコンコードの中に動き方を指定するために〇〇animatedというアニメーションのclassを付け加えるんでした。
例えば
<p><i class="fab fa-adobe faa-wrench animated fa-5x"></i>インコは可愛い</p>
インコは可愛い
というふうに。
次にカーソルがアイコンの上に来たときだけアニメーションが動くようにするにはアニメーションのクラスに
-hover
を付ければ良いんでしたね。
<p><i class="fab fa-adobe faa-wrench animated-hover"></i>インコは可愛い</p>
するとアイコンにカーソルを置いた場合のみアイコンが動きます。
インコは可愛い
それからテキスト部分などにカーソルを当てるとアイコンが動くようにしたい場合には
親要素に以下のような記述をまず行い。
<タグ class=”faa-parent animated-hover”>
その上で小要素のアイコンコードにアニメーションのCSSのうちanimatedを取り除いたものを貼るんでしたね。
<p class="faa-parent animated-hover"> <i class=" fab fa-adobe faa-wrench faa-wrench fa-5x "></i> ここにカーソルを当てたときだけアイコンが動くよ^^; </p>
ここにカーソルを当てたときだけアイコンが動くよ^^;
終わりに
その他CSSの疑似要素を使ってアイコンを表すやり方がありますが。
それだけでも膨大な情報になるのでは別途記事にしたいと思います。
今回はほぼHTMがメインの情報についてまとめてみました。
アイコンの使い方をマスターすればより表現豊かなサイトが作れます。
楽しいですしね。
この記事へのコメントはありません。