CocoonでFont Awesome 5アイコンの色やサイズを変更

こんにちは、解説ゾロです！

Cocoonの「Font Awesome（フォントオーサム）」は、CSSのスタイルシートをいじらなくても「色」や「サイズ」を簡単に変更することができます。

変更する方法は、Font Awesome 5のサイトでコピーしたアイコンフォントのコードにちょこっと追記するだけで好きな色にしたり、大きくしたり小さくしたりするカスタマイズがとっても簡単にできちゃいます。

まだ導入していない方はぜひ使ってみてください。CocoonならWebアイコンフォントの、　や　　や　　が簡単に使えて楽しいのです・・・が、今日はもっと楽しくなるような内容です！笑

今の、　や　　や　　のアイコンフォントが、　や　やのように、インパクトのあるアイコンフォントにちゃちゃっと変身できるのです。でも、目が回る～！！笑

今日は、CocoonでFont Awesome 5のコードにちょこっと加えるだけでアイコンフォントの「色」や「サイズ」を変更したり「回転」ができる、楽々カスタマイズ方法の解説です。CSSも使わずにとっても簡単ですので楽しみながら一緒にやりましょ！

前回の記事はこちら

Font Awesome 5アイコンの基本コード

はじめに、重要事項です。笑！
コードはテキストの画面にお書きください！
コードを書く場合は、WordPress「投稿を編集」の「ビジュアル」から「テキスト」に変更し、
テキストの画面に書くことで変更が反映されます。

本日の解説で使うWebアイコンフォントは、当サイト「解説ゾロ」のマスク「」を使って解説いたします。

Font Awesome 5のサイトで表示されている「マスク」の基本のコードは、

です。”fas fa-mask”の部分が各Webアイコンフォントによって変わる部分です。

そのままのコードで「テキスト」の画面に書くと、このように色は黒いマスクで、このサイズで表示されます・・・が、このコードにちょっと追加するだけで、冒頭のように色やサイズを簡単に変更できます。オマケに回転もします。

今回の色の指定は「style」タグというものを使います。書き方は、 style=”color:〇〇〇;”で、〇〇〇の部分に色の名前を指定すれば簡単に変更することができます。

よく使いそうな4つの色でサンプルのコードを書いてみましたので「色の名前」や「style」の挿入個所など、よろしければ参考にしてください。

変更したい色の名前	変更後のFont Awesome 5の「コード」	表示結果
red	<i class=”fas fa-mask” style=”color:red;”></i>
blue	<i class=”fas fa-mask” style=”color:blue;”></i>
yellow	<i class=”fas fa-mask” style=”color:yellow;”></i>
green	<i class=”fas fa-mask” style=”color:green;”></i>

「マスク」の基本コードの黒色もいいですが、色が付くと明るくなってまたイイですね！

とっても簡単に色を変更することができました。注意点は、この「style」タグの方法はCSSを使いませんので、＃から始まる「#ff0000」（red）のようなカラーコードは使えませんが、色の名前「red」や「blue」を指定することで、より簡単に色の変更ができます。

色を指定する場合の「red」や「blue」などの「色の名前」は下記「原色大辞典」が探しやすいかと思いますが最近は広告を見ないと使えなくなってしまったのが難点です。

Font Awesome 5アイコンフォントの色の変更を実践してみると「コード」のこの辺にコレを指定すると変わる！というのが何となくわかってきます・・・よね！笑

今度は、Webアイコンフォントのサイズの変更ですが、色の変更をやられた方はすぐにできちゃいます。たぶん！笑。続けて、おなじみ？の「解説ゾロ」のマスクで解説していきます。

今度のコードの書き方は、サイズを指定する「fa-〇〇」をWebアイコンフォントのコード内に追記するだけです。具体的な「〇〇」は「2x」や「3x」などを入れてサイズを指定すれば簡単にアイコンフォントのサイズを変更することができます。

Font Awesome 5サイトでコピーしたサイズよりも小さくしたり大きなサイズのアイコンフォントに変更することができます。

マスクも大きくなると迫力があるのですね！笑
この方法で「fa-10x」まで大きなサイズを表示することができます。

笑！

ピクセル（px）は数値で指定ができますので、微妙なサイズを表現することができます。書き方は、色の変更と同じ「style」タグを使います。style=”font-size:〇〇px;“　で、〇〇に数値を入れればOKです。

サンプルコードを2つ書いてみました。「7px」だと、まるで視力検査ですね！笑

変更したいピクセル数	変更後のFont Awesome 5の「コード」	表示結果
7px	<i class=”fas fa-mask” style=”font-size:7px;”></i>
26px	<i class=”fas fa-mask” style=”font-size:26px;”></i>