便利ツールを使う

【2022年】Font Awesomeをブログやサイトで使う導入方法とカスタマイズまとめ

2022年3月10日

【2022年】Font Awesomeをブログやサイトで使う導入方法とカスタマイズまとめ

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
5emfa-5x
参考:Sizing Icons|Font Awesome

サイズ指定の《fa-1x》は1~10の《fa-10x》まであります。

逆さ・傾ける方法

傾きや逆さにしたい場合は、傾きを変えるクラス名を追記します。

\ コード挿入例 /

<i class="fa-brands fa-cc-visa fa-rotate-180"></i>
ブラウザ表示クラス名詳細
fa-rotate-9090度回転
fa-rotate-180180度回転
fa-rotate-270270度回転
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>にコードを入れる必要がありますが、使うと便利なので、ぜひ使ってみてください!

  • この記事を書いた人
  • 最新記事

まめこ

【ブログ歴10年】

これからブログを書いてみたいなという人に向けて『ブログを始める手順』『ブログについて』や知っておくと便利な『おすすめツール』の紹介しています。

夫について行き海外生活スタート▸出産▸現在3歳の息子と在宅での生活

子育てのかたわらでも、場所や時間にとらわれない働き方を目指して発信していきます!

-便利ツールを使う
-, ,