FontAwesomeのアイコンの色を変更する方法！
FontAwesomeは画像やテキストなどを用いるよりも簡単にアイコンを追加できます。色・大きさ・角度・アニメーションなどの実装も自由自在です。この記事ではFontAwesomeのアイコンの色を変更する方法を解説します。
FontAwesomeのアイコンの色を変更する方法
FontAwesomeのアイコンの色を変更する方法は大きく分けて2つあります。
HTMLタグに直接style属性を指定する方法をCSSを用いて変更する方法です。
基本的な書き方は両方とも同じですので、その状況にあった選択ができるように両方マスターしましょう！
style属性を追加する方法
まずHTMLにstyleタグを直接追加する方法を解説します。
普段使っているFontAwesomeのiタグに以下のように記述を足します。
style属性
<i class="FontAwesomeのID" style="color: 色;" ></i>
ここで用いる色の指定法はRGBで16進数で記述する方法と色の名前を直接指定する2種類の方法があります。
それぞれの方法で色が指定されていることを以下のサンプルコードで確認してください。
HTMLで色を付けるメリットはFontAwesomeのクラス名と色の指定を一目で確認できることです。HTMLで1行で書けるのでCSSを何行も書く必要がありません。
また色の指定方法は下記を参照下さい。
CSSで指定する方法
次に解説する方法はクラス名などに対してcolorプロパティで色を指定します。普段の文字の色を変えるよう時と同じ方法です。
以下のサンプルコードで確認してください。
HTMLにstyleタグを指定する方法と比べるとCSSを書く必要が出てきますが、色を表すクラス名を作ればクラス名で管理することができるというメリットがあります。
FontAwesomeのアイコンの色が変わらない場合
上記の２種類の方法をどちらとも試していただければ基本的には色を変更できるはずです。
それでももし色が反映されない場合は、初歩的な解決策とはなりますが、まずはクラス名やプロパティに記述ミスがないか確認してください。
またそれでもだめな場合はCSSの文法ミスや他のスタイルによる上書きの可能性もあります。下記を参考にしてみましょう。
