▶ Amazon 新生活アイテム
スポンサーリンク

ページにプロモーションが含まれる場合があります。

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

スポンサーリンク
初心者
初心者

ブログで文章の中にアイコンが入ってるのをたまに見るけど、自分のブログでもやりたい!

よしてっく
よしてっく

それならFont AwesomeWEBアイコンフォントを使いましょう!

サイトでたまに見かける文章内にアイコンが表示されている表現、やってみたいですよね。

こんな感じ↓(画像ではありません)
Twitter  始めました~!

 

今回は、WordPressのCocoon(コクーン)でFont AwesomeWEBアイコンフォントを使用する方法をご紹介します。動き(アニメーション効果)も追加できます。

この記事は、サルワカさんのサイトを参考にさせて頂きCocoonユーザー向けの解説にアレンジしました。(お世話になってます)

 

HINT
ちなみにアイコンフォントではなく、サイトアイコン(ファビコン)について興味がある人は下の記事を参照ください。

▶ファビコンをオリジナルの画像にする|サイトアイコンの設定

ファビコン・サイトアイコン

ファビコン・サイトアイコン

 

 

Font Awesome(フォント オーサム)とは

Font Awesomeとは

Font Awesome(フォント オーサム)は、Webサイトにアイコン型のフォント(Webアイコンフォント)を提供しているサイトです。

よしてっく
よしてっく

無料(Free)と有料(Pro)で扱えるアイコンのレパートリーに差が出ますが、無料版でも種類が豊富なので充分使えます。

■Webアイコンフォントの特徴

  • テキストと同様に文中に挿入できる
  • 拡大してもボヤけない
  • 色の変更ができる
  • サイズの変更ができる
  • 動きも追加できる(アニメーション効果)

 

ちなみにProのラインセンス料金は調べた時点では$99(年間)でした。(変動する可能性あり)
Font Awesome_proの料金

 

 

Font Awesome4と5⇒バージョン5を推奨

バージョン5を推奨

現状Font Awesomeにはバージョン4と5があり、使用ルールが異なります。

よしてっく
よしてっく

Cocoonはバージョン4と5を設定で切り替える方式で初期設定は4です。

バージョン4を使用していると、5に移行するのにコード書き換えの面倒な作業が発生するので、Font Awesomeを初めて使う人は新しいバージョン5がオススメ。

※Cocoonでのバージョン切り替え手順は後で紹介します。

 

Font Awesome5はスタイル・カテゴリーで5分類

スタイルカテゴリーで5分類

Font Awesome5のアイコンは、スタイル・カテゴリーとして大きく5種類に分類されています。(Font Awesome4ではスタイル・カテゴリー分類は無し)

  1. Solid(ソリッド:fas系)
  2. Regular(レギュラー:far系)
  3. Light(ライト:fal系)※Proのみ
  4. Duotone(デュオトーン:fad系)※Proのみ
  5. Brands(ブランド:fab系)

 

❶ Solid(ソリッド:fas系)

・塗りつぶし部分が多いアイコン。※無料アイコンの種類が一番多い。

例:   …など。

 

❷Regular(レギュラー:far系)

・線の太さが標準スタイルのアイコン。※無料アイコンの種類は少なめ。

例:    …など。

 

❸Light(ライト:fal系)

・線が細いスタイルのアイコン。※Proのみ。

Font Awesome_Light

 

❹Duotone(デュオトーン:fad系)

・色の濃さを2パターン使っているアイコン。※Proのみ。

Font Awesome_Duotone

 

❺Brands(ブランド:fab系)

・有名メーカーなどのロゴアイコン。

例: Google、 Twitter、 Amazon、 YouTube …など。

 

無料の範囲だとLight(ライト系)とDuotone(デュオトーン系)は扱えません。

スタイル・カテゴリー分類によって気を付ける事は、

コードの先頭が、  far~ fal~ fad~ fas~ fab~ と、違うということです。

トラブル防止の為、予備知識として覚えておいて下さい。

 

 

Cocoon:Font Awesome5の使い方[基本編]

CocoonFont Awesome5の使い方基本編

Cocoonは初めからFont Awesomeが使えますが、初期設定ではバージョンが4になっているので5に切り替えてから使用します。

■CocoonのFont Awesome利用手順

  1. Font Awesomeバージョン切替え(4⇒5)
  2. Font Awesome5でアイコンのコードを取得
  3. サイトにコードを貼り付け(HTML)

 

❶Cocoon:Font Awesomeバージョン切替え(4⇒5)

(1)WordPress管理画面(ダッシュボード)で、Cocoon設定をクリックします。

Cocoon-setting

 

(2)タブメニューの全体をクリックします。

Whole Cocoon settings

 

(3)少し下にスクロールし、サイトアイコンフォントの項目でFont Awesome 5にチェックを入れます。

Font Awesome 5 settings

 

(4)変更をまとめて保存をクリックします。

Save changes together

 

これで、Font Awesome5を利用する準備は完了です。

 

 

❷Font Awesome5でアイコンのコードを取得

(1)Font Awesomeのサイトにアクセスします。

>>> https://fontawesome.com/

 

(2)アイコンの一覧ページが表示されます。
Font Awesomeのアイコン一覧ページ
 
 
(3)左サイドメニューのFreeをクリックしてチェックを入れます。(表示される候補が無料版アイコンだけになる)
アイコン表示をFreeに切り替え
 
 
 
(4)ほしいアイコンをキーワードで探します。上部の検索ボックスに名称を英語で入力。
※日本語には非対応。
 アイコンを検索
 

 

(5)使用したいアイコンを選んでクリックします。

選んだアイコンをクリック

 

(6)アイコンの詳細ページが表示されます。

アイコンのページ

アイコンのページ

 

 

(7)右側の<i class●●●><i>となっているテキストをクリックするだけでコードのコピーができます。

アイコンのコードをコピー

コードをコピー

 

↓拡大

アイコンのコード

アイコンのコード

↑上の場合は  <i class=”fas fa-desktop“></i>  というコードです。

 fas fa-desktop  の部分がアイコンによって違います。

これで、アイコンフォントのコードが取得できました。(コピーした状態になっている)

 

❸サイトにコードを貼り付け(HTML形式)

★前項でコピーしたアイコンフォントのコードを投稿画面で貼り付けます。

 

(1)投稿画面をHTMLモード(テキストエディター)に切り替えます。

テキストモードに切替

 

★ブロックエディター(グーテンベルグ)の場合
+(ブロックの追加)カスタムHTML

ブロックエディターのHTMLモード
 
 

(2)アイコンを挿入したい場所にカーソルを置いてCtrl+Vなどでコードを貼り付けます。

コードの貼り付け

 

(3)エディターを通常(ビジュアルモード)に戻すとアイコンが確認できます。

アイコンフォントの表示例

 

これで、アイコンを文章の一部として表示できました。

 

 

Font Awesome5の使い方[応用編]

Font Awesome5の使い方応用編

応用編として、アイコンフォントに様々な効果を追加する編集方法をご紹介します。

■アイコンフォントの編集項目

  1. サイズの変更
  2. 色の変更
  3. 角度の変更
  4. 反転
  5. 動き(アニメーション効果)

 

✅アイコンフォント編集の基本ルール

Font Awesomeから取得したコード内のアイコン分類コードの後ろに編集用のコードを追記します。

基本のコード:<i class=”fas fa-laptop”></i>

↓ 例えば編集用コード●●●●を追記

追記後の状態:<i class=”fas fa-laptop ●●●●“></i>

●●●●の前には半角スペースを入れる。
※ただし色コードの追記ルールだけは違います(後で解説)

 

❶サイズの変更

記入例:<i class=”fas fa-laptop fa-xs”></i> など。

サイズ コード 見た目
1倍(基本) 追記コード無し  
0.75倍 fa-xs  
0.875倍 fa-sm  
1.33倍 fa-lg  
2倍 fa-2x  
3倍 fa-3x  
4倍 fa-4x  
5倍 fa-5x  
6倍 fa-6x  
7倍 fa-7x  
8倍 fa-8x  
9倍 fa-9x  
10倍 fa-10x  

※10倍より上は設定無し。

 

❷色の変更

色の編集用コードだけは、追記する場所が他と違います。

基本のコード:<i class=”fas fa-laptop”></i>

↓ 例えばの編集用コード●●●●を追記

追記後の状態:<i class=”fas fa-laptop” ●●●●></i>

 

記入例
<i class=”fas fa-laptop” style=”color: red;”></i> 

カラー コード 見た目
style=”color: red;”  
style=”color: yellow;”  
style=”color: blue;”  
style=”color: green;”  
ピンク style=”color: pink;”  
※カラー番号指定(6ケタ) style=”color:#528fff;”  

※カラー番号は色見本サイトなどから入手して下さい。

 

❸角度の変更

記入例
 <i class=”fas fa-laptop fa-rotate-90“></i>  

角度 コード 見た目
基本 追記コード無し  
90° fa-rotate-90  
180° fa-rotate-180  
270° fa-rotate-270  

※45°などの間の角度は指定できません。

 

❹反転

記入例
<i class=”fas fa-aws fa-flip-horizontal“></i> 

反転方法 コード 見た目
基本 追記コード無し  
水平方向で反転 fa-flip-horizontal  
垂直方向で反転 fa-flip-vertical  

 

❺動き(アニメーション効果)

アニメーション効果を使うためには、<head>タグに下記のFont Awesome Animation用のコードを追加します。

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

 

✅Cocoonで<head>タグにコードを追加する手順

(1)Cocoon設定 アクセス解析・認証 ヘッド用コードの枠内にコピペします。

Cocoonでheadタグにコードを貼り付け

※枠内に既に他のコードがある場合は、その下に1~2行、改行してから貼り付けて下さい。

↓拡大(※バージョンの数字を表す「0.0.10」の部分は更新で変わる可能性があります)

Cocoonでheadタグにコードを貼り付け拡大

 

(2) 変更をまとめて保存 をクリックします。

Save changes together

これで、アニメーション効果のコードが有効になります。

 

✅アニメーション効果の一覧

記入例
<i class=”fas fa-redo fa-spin“></i> 

動き コード 見た目
回転 fa-spin  
8コマ回転 fa-pulse  
レンチ faa-wrench animated  
ブルブル faa-ring animated  
横揺れ faa-horizontal animated  
縦揺れ faa-vertical animated  
点滅 faa-flash animated  
跳ね faa-bounce animated  
浮遊 faa-float animated  
パルス faa-pulse animated  
シェイク faa-shake animated  
ジャジャーン風 faa-tada animated  
通過 faa-passing animated  
バック faa-passing-reverse animated  
バースト faa-burste animated  

 

✅マウスホバーした時だけアニメーション効果

コードの  animated  の部分を
 animated-hover  に変更する。(-hoverを追加)

↓マウスカーソルを置いてみて!(タップ)

  

 

複数の効果を追加したコードの記入例

の基本コード <i class=”fas fa-ad”></i>に、

サイズ回転のコードを追加した場合は下記のようになります。

  • サイズ(3倍) ⇒ fa-3x
  • 回転 ⇒ fa-spin
  • 色(緑) ⇒ style=”color: green;”

<i class=”fas fa-ad fa-3x fa-spinstyle=”color: green;”></i>

⇒ 

 

よしてっく
よしてっく

それぞれのコードを上手く組み合わせて、自分だけのユニークな表現をしてみましょう

 

アイコンを日本語で探せる便利サイト

日本語で探せる便利サイト

Font Awesomeサイトでのフォントアイコン検索は英語にしか対応していません。

よしてっく
よしてっく

日本語を変換して英語で検索するのが面倒な人は下記のサイトがオススメです!

 

検索ボックスで検索するとアイコンの絞り込みができます。

Font Awesome日本語検索

 

テキストリンクをクリックでダイアログボックスが出ますので、コードのコピーもクリックだけでOK。

Font Awesome日本語検索コードコピー

初心者
初心者

日本語で探せるのはかなり便利!
親切すぎる~♥

まとめ:アイコンフォントで表現の幅を広げよう

今回は、Font AwesomeのアイコンフォントをCocoonで使う方法をご紹介しました。

CocoonにはFont Awesomeを使う機能が初めから装備されていますので設定も比較的簡単です。

よしてっく
よしてっく

アイコンフォントを取り入れると表現のバリエーションが格段にアップし、他サイトとの差別化にもなります!

HTML(テキストモード)の理解も深まるので、新しい機能にも是非チャレンジしてみて下さい。

コメント

タイトルとURLをコピーしました