【Font Awesome】アイコンフォントの使い方

wp-Font Awesome WordPress

記事に装飾を加える方法の一つとして『Font Awesome』のアイコンを使う方法があります。
文章だけでは味気ないなって事ありませんか？Webアイコンを使うことで効果的に視覚に入ってきますので味気ない文章じゃなくなります！
WordPressでは『Font Awesome』のアイコンをサイト内に表示させる方法と『Font Awesome』アイコンの装飾方法についていろいろと簡単にご紹介していきます。

編集長K
KTA

カスタムする前には必ずデータのバックアップを取っておくようにしましょうね！

Before

After

※本記事で紹介している情報は執筆時点のもので、閲覧時点では変更になっている場合がございます。
ご利用の環境（ブラウザ、サーバー、プラグイン、テーマ、またはそのバージョンや設定、WordPress本体のバージョンや設定など）によっては本記事の通りに動作しない場合がございます。
あらかじめご理解いただければ幸いです。

Contents
  1. Font Awesomeってなに？
  2. Font Awesomeを使うための準備～使い方【基本編】
  3. Font Awesomeの使い方【応用編】
  4. カスタマイズの確認
  5. さいごに

Font Awesomeってなに？

wp-fontawesome   ホームページやブログで利用できるWebアイコンフォントの事です。

編集長K
KTA

このアイコンは企業のホームページや個人のブログでも活躍していて、本当によく見かけます！

『Font Awesome 6』Proアイコン19,287個　Freeアイコン2,016個 wp-fontawesome6   『Font Awesome 5』Proアイコン7,864個　Freeアイコン1,608個 wp-fontawesome5

※2022年8月30日現在

この中のFreeアイコンを使っていきます ※有料プラン『PROアイコン』は$79ですがFreeプランに比べアイコン種類が多いのが特徴です

編集長K
KTA

WordPressを始めたばかりの方は私のようにFreeプランのアイコンでも十分な装飾ができると思いますよ！

Font Awesomeを使うための準備～使い方【基本編】

編集長K
KTA

4Stepでアイコンが使えるようになります！

  • Cocoon設定変更
  • 使いたいアイコンを探す
  • 使いたいアイコンコードのコピー
  • 使いたいアイコンコードのペースト

Step1:Cocoon設定変更

Cocoonのデフォルト設定では『Font Awesome4』になっているので『Font Awesome5』に変更していきます。

  • WordPress管理画面から「Cocoon設定」を選択
  • 『全体』タブ⇒『サイトアイコンフォント』⇒『Font Awesome5』を選択

wp-fontawesome3 まずはこの設定変更だけで、アイコフォントを使用することが可能です  

Step2:使いたいアイコンを探す

残念ながらCocoonの現状では『Font Awesome5』までしか使えません。

申し訳ないですがFont Awesome 6への対応は現時点では考えていません。 というのも、現在スキンが90種類以上あるのですが、その全てに対して対応コードを書く必要があるからです。

Cocoon『Font awesome 6への対応』

編集長K
KTA

『Font Awesome5』freeにもたくさんのアイコンがあるから十分ですけどね！

以下のversionは『5.15.4』を選択するようにしてください。 wp-fontawesome4 『Freeを選択』 wp-fontawesome7  

Step3:使いたいアイコンのコードをコピーする

使いたいアイコンをクリック wp-fontawesome8 wp-fontawesome9

Step4:使いたいアイコンのコードを貼り付ける

編集長K
KTA

Font Awesome5で探したアイコンコードをHTML(文章)の中に貼り付けます

HTML

<i class=”fas fa-yin-yang”></i>

こんな感じに表示されます！

Font Awesomeの使い方【応用編】

基本的な使い方は簡単でしたね！

カスタムに関して

応用編では簡単ですがいろいろなカスタムをしていきます。

色を変える

iタグにclassを追加。そのclass名にCSSで色を指定します。

編集長K
KTA

class名は『my-awesome2』にしておきましょう

HTML

<i class=”fas fa-thumbs-up my-awesome2“></i>

CSS

.my-awesome2 {color: 〇〇}

こんな感じになります

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

アイコンの大きさは簡単に変えることができます。コードを以下のあたりに記載してみてください。

<i class=”fas fa-thumbs-up fa-5x“></i>

こんな感じになります

アイコンfa-〇〇コード例
fa-lg<i class=”fas fa-thumbs-up”></i>
fa-2x<i class=”fas fa-thumbs-up fa-2x”></i>
fa-3x<i class=”fas fa-thumbs-up fa-3x”></i>
fa-4x<i class=”fas fa-thumbs-up fa-4x”></i>
fa-5x<i class=”fas fa-thumbs-up fa-5x”></i>

アイコンと文字の間にスペースを作る

コードを以下のあたりに記載してみてください。

<i class=”fas fa-thumbs-up fa-fw“></i>
アイコン(fa-fw ver)アイコンノーマル

こんな感じになります

新人
新人

違いが全く・・・

表示角度を変える

コードを以下のあたりに記載してみてください。

<i class=”fas fa-thumbs-up fa-rotate-〇〇“></i>

〇〇の部分には以下の数字を記載します

アイコンfa-rotate-〇〇コード例
fa-rotate-90<i class=”fas fa-thumbs-up fa-rotate-90″></i>
fa-rotate-180<i class=”fas fa-thumbs-up fa-rotate-180″></i>
fa-rotate-270<i class=”fas fa-thumbs-up fa-rotate-270″></i>

こんな感じになります 90/180/270以外は反応しませんのでご注意ください。

反転させる

コードを以下のあたりに記載してみてください。 あまり使うことがないアニメーションかもしれません。

<i class=”fas fa-thumbs-up fa-flip-horizontal“></i>
アイコンクラス名コード例
fa-flip-horizontal<i class=”fas fa-thumbs-up fa-flip-horizontal”></i>
fa-flip-vertical<i class=”fas fa-thumbs-up fa-flip-vertical”></i>

こんな感じになります

アイコンを線で囲う

コードを以下のあたりに記載してみてください。

<i class=”fas fa-thumbs-up fa-border“></i>

こんな感じになります

アイコンを重ねる

コードを以下のあたりに記載してみてください。

<span class=”fa-stack fa-2x”> <i class=”fas fa-thumbs-down fa-stack-1x”></i> <i class=”fas fa-ban fa-stack-2x” style=”color:#ff7675″></i> </span>

こんな感じになります

アニメーションアイコンを使う

ここからはアイコンにいろいろなアニメーションを付ける方法を紹介していきます

編集長K
KTA

headタグに追加していきますので必ずバックアップをしておきましょう！

アニメーションを付ける準備【テーマの編集】

  • WordPress管理画面から『外観』『テーマファイルエディター』の順にクリック
  • 編集テーマは必ず『Cocoon Child』である事を確認
  • 『tmp-user』『haed-insert.PHP』の順にクリック

wp-fontawesome-header

アニメーションを付ける準備【コードの貼り付け】

  • 『haed-insert.PHP』をクリック

wp-fontawesome-header2 以下のコードを貼り付けてください。

<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” />

ここまで設定ができたらファイルを更新をクリックします

編集長K
KTA

ここまで無事設定できましたか？以下にアニメーションをまとめたので参考にしてみてください

アニメーションクラス名コード
揺れるfaa-wrench animated<i class=”fas fa-spider faa-wrench animated”>
ブルルルfaa-ring animated<i class=”fas fa-snowman faa-ring animated”>
横揺れfaa-horizontal animated<i class=”fas fa-people-carry faa-horizontal animated”>
縦揺れfaa-vertical animated<i class=”fas fa-glasses faa-vertical animated”>
フラッシュfaa-flash animated<i class=”fas fa-exclamation-triangle faa-flash animated”>
バウンスfaa-bounce animated<i class=”fas fa-bus-alt faa-bounce animated”>
スピンfaa-spin animated<i class=”fas fa-cog faa-spin animated”>
浮くfaa-float animated<i class=”fas fa-upload faa-float animated”>
膨らむfaa-pulse animated<i class=”fas fa-heart faa-pulse animated”>
シェイクfaa-shake animated<i class=”fas fa-wine-glass-alt faa-shake animated”>
ジャジャーンfaa-tada animated<i class=”fas fa-splotch faa-tada animated”>
通過faa-passing animated<i class=”fas fa-chevron-circle-right faa-passing animated”>
バックfaa-passing-reverse animated<i class=”fas fa-chevron-circle-left faa-passing-reverse animated”>
バーストfaa-burst animated<i class=”fas fa-bomb faa-burst animated”>

カスタマイズの確認

編集長K
KTA

アイコンが機能しているか確認してみましょう

ブラウザ別スーパーリロード方法

編集長K
KTA

ブラウザによってスーパーリロードとキャッシュクリアの方法が異なりますので簡単にまとめたので参考にしてみてください！

スーパーリロードとは?

ブラウザに残っているキャッシュをスルーして、最新ページの情報を読み込む方法です！

【Google Chrome】 【Microsoft Edge】
  • 『Ctrl』+『F5』
  • 『Shift』+『F5』
  • 『Ctrl』+『Shift』+『R』
  • 『Ctrl』+『』
  • 『Shift』+『』
【Safari】
  • 『Shift』+『』
  • 『Ctrl』+『R』
【FireFox】
  • 『Ctrl』+『F5』
  • 『Ctrl』+『Shift』+『R』
  • 『Shift』+『』

ブラウザ別キャッシュクリアの方法

キャッシュクリアとは?

ブラウザに残っているキャッシュを削除して、Webサイトのサーバーから新しいデータを取り込む方法です

【Google Chrome】
  • ブラウザ右上の設定メニュー（・が縦に３つ並んでいるボタン）をクリックして「設定」を選ぶ
  • ページ下の方にある「詳細設定」をクリック
  • 「プライバシーとセキュリティー」をクリックして、「閲覧履歴データの削除」をクリック
  • 「キャッシュされた画像とファイル」にチェックを入れる
  • 「データ消去」をクリックする
  • 「キャッシュされた画像とファイル」にチェックを入れる
  • 「データ消去」をクリックする
【Microsoft Edge】
  • 画面右下の・が３つ並んだアイコンをクリック
  • 「設定」をクリック
  • 「プライバシー、検索、サービス」をクリック
  • 「クリアするデータの選択」を押す
  • 「キャッシュされた画像とファイル」にチェックを入れる
  • 「今すぐクリア」を押す

さいごに

編集長K
KTA

Font Awesome(Webアイコン)は本当にいろんな方が利用さえている有名なWebアイコンです。サイトのテーマに合わせてご利用いただければ幸いです。

注意

カスタムは自己責任でやりましょうね！ wp-about-custom-aveterk-1

編集長K
KTA
今回も最後までご覧いただき誠にありがとうございました！

コメント