Font awesomeの導入から、使い方、応用のアニメーションについてまとめました！
＼ 知りたものを要check！ ／
font awesomeとは
そのため、文字の大きさを変えても粗くなることもなく、SNSアイコンなどのアイコンを簡単に挿入することが可能になります。
| 使い方 | ブラウザ表示 |
|---|---|
| ヘッダーメニューに | HOME お問合せ |
| 文章の中に | 「虫めがねのアイコン（）」をクリックしてください |
| 見出しやポイントに | ○○する方法 |
| 注目させたい | No.1 ○○にご注意ください |
| ブランドアイコン | |
| ブランドアイコン② |
- 大きさ
- 色
- アニメーション
- 重ねる
など、細かな設定が簡単に使えるようになります。
Font Awesomeを導入する
Font awesomeをこれから使ってみたいというあなた！
- Font awesome6の導入方法
- Font awesomeの使い方
- Font awesomeがうまく表示されない
ぜひ読んでみてください。
ただ、WordPressの場合、お使いのテーマにより自動で使用できるようになっていることもあります。
そのような場合は、次の項目へ！
グローバルメニューで使う方法
HOME
ヘッダーにグローバルメニューを入れる方法です。画像付きで、詳しく別記事にまとめました！
色を変更する方法
色を変更したい場合は、CSS（カスタマイズ⇒追加CSSまたはStyle.css）にカラー設定コードを記載し、WEBアイコンにクラス名を追記します。
＼ コード挿入例 ／
//CSSに記載するコード
.red-color { color: #C62828;}//Webアイコンに追記する
<i class="fa-solid fa-house-chimney red-color"></i>
サイズを大きくする方法
サイズの大きさを変えたい場合は、表示させたい大きさのクラス名を追加します。
＼ コード挿入例 ／
<i class="fa-solid fa-house-chimney fa-3x"></i>| サイズ | クラス名 | 表示 |
|---|---|---|
| 0.625em (10px) | fa-2xs | |
| 0.75em (12px) | fa-xs | |
| 0.875em (14px) | fa-sm | |
| 普通サイズ | なし | |
| 1.25em (20px) | fa-lg | |
| 1.5em (24px) | fa-xl | |
| 2em (32px) | fa-2xl | |
| 5em | fa-5x |
サイズ指定の《fa-1x》は１～１０の《fa-10x》まであります。
逆さ・傾ける方法
傾きや逆さにしたい場合は、傾きを変えるクラス名を追記します。
＼ コード挿入例 ／
<i class="fa-brands fa-cc-visa fa-rotate-180"></i>| ブラウザ表示 | クラス名 | 詳細 |
|---|---|---|
| fa-rotate-90 | 90度回転 | |
| fa-rotate-180 | 180度回転 | |
| fa-rotate-270 | 270度回転 | |
| fa-flip-horizontal | 水平方向に反転 | |
| fa-flip-vertical | 垂直方向に反転 | |
| fa-flip-both | 水平かつ垂直方向に反転 | |
| fa-rotate-by | 任意の角度で回転<style>で設定が必要 | |
| 反転<span class>で設定が必要 |
アニメーションで動かす方法
アニメーションさせる時は、動かしたいアニメーションのクラス名を追記します。
＼ コード挿入例 ／
<i class="fa-solid fa-cannabis fa-beat"></i>| ブラウザ表示 | クラス名 | 詳細 |
|---|---|---|
| fa-beat | ビートを刻む | |
| fa-fade | 点滅 | |
| fa-beat-fade | フェードイン・アウト | |
| fa-bounce | 跳ねる | |
| fa-flip | 回転 | |
| fa-shake | シェイク | |
| fa-spin | スピン |
以下、アニメーションやアニメーションをホバーで動作させるために、<head></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" />| ブラウザ表示 | クラス名 | 詳細 |
|---|---|---|
| faa-wrench animated | レンチ | |
| faa-ring animated | ベル揺れ | |
| faa-horizontal animated | 横揺れ | |
| faa-vertical animated | 縦揺れ | |
| faa-flash animated | 点滅 | |
| faa-bounce animated | バウンス | |
| faa-spin animated | 回転 | |
| faa-float animated | 浮上 | |
| faa-pulse animated | パルス | |
| faa-shake animated | シェイク | |
| faa-tada animated | 大きくなって揺れる | |
| faa-passing animated | 横移動 | |
| faa-passing-reverse animated | バック | |
| faa-burst animated | バースト |
＼ コード挿入例 ／
<i class="fa-brands fa-twitter faa-wrench animated"></i>WEBアイコン同士を重ねて使う方法
アイコンを重ねたい時は"fa-stack"クラス名を使用します。
＼ コード挿入例 ／
<span class="fa-stack">
<i class="fa-solid fa-heart fa-stack-2x tomato-color"></i>
<i class="fa-solid fa-thumbs-up fa-stack-1x white-color"></i>
</span><span>タグの中に"fa-stack"クラスを入れる<span>タグの中に「Webアイコンを2つ」入れる- 背面にするアイコンに
"fa-stack-2x"のクラスを追加 - 表面にするアイコンに
"fa-stack-1x"のクラスを追加 - 色を変更しないと重ねてもわからないで、色変え必須
- サイズの変更は
<span class>に追記
マウスホバーで動きを付ける方法
WEBアイコンの色を変更する方法の応用版
CSSに「カラー設定」＋「ホバー時のカラー設定」を記載します。
＼ コード挿入例 ／
//CSSに記載
.red-color { color: #C62828;}
.red-color:hover { color: #00bfff;}//Webアイコンに追記
<i class="fa-solid fa-chess-queen red-color"></i>WEBアイコンをアニメーションで動かす方法の応用版
アニメーションクラス名のanimatedの代わりに、animated-hoverを使用します。
＼ コード挿入例 ／
<i class="fa-solid fa-apple-whole faa-wrench animated-hover"></i>カラーを変更したい場合は、<span>でWebアイコンを囲い、設定したカラークラス名を親要素の<span>で反映させます。
＼ コード挿入例 ／
//元カラー
.red-color { color: #C62828;}
//ホバー時のカラー
.red-color:hover { color: #00bfff;}<span class="red-color fa-2xl">
<i class="fa-solid fa-apple-whole faa-wrench animated-hover"></i>
</span>WEBアイコン同士を重ねて使うの応用版
WEBアイコンを重ねると見えなくなるので、カラー設定は必須になります。
＼ コード挿入例 ／
//CSSに記載
.mizuiro-color { color: #00bfff }
.white-color { color: #ffffff; }//Webアイコンに追記
<span class="fa-stack fa-2xl">
<i class="fa-solid fa-circle fa-stack-2x mizuiro-color"></i>
<i class="fa-brands fa-twitter faa-wrench animated-hover fa-stack-1x white-color"></i>
</span>WEBアイコンを線で囲う方法
Webアイコンを線で囲うには、囲いたいアイコンにfa-borderのクラス名を追加します。
＼ コード挿入例 ／
<span class="fa-3x">
<i class="fa-solid fa-arrow-up-1-9 fa-border"></i>
</span>まとめ
font awesomeのまとめでした！
<head>にコードを入れる必要がありますが、使うと便利なので、ぜひ使ってみてください！
