fontawesome（フォントオーサム）はとても便利なアイコンです。
画像より扱いやすく！大きさや色の他、回転や反転も自由自在。
ブログでアイコンが自由に使えます。私も使用していましたが、現在は使用していません。
fontawesome色を変えたい時は？
CSSで色指定するという方法が多くあります。
定形のもので使用する時は確かにスタイルシートで色指定する方が簡単。
fontawesomeのアイコンをブログの中で一つしか使用しない物…わざわざCSSで色指定するのは無駄。
（ページ用のCSSが書き込めるならCSSでも可）
メニューやタイトルなどは共通ですが…記事中のちょっとしたアイコンなど1度しか使わない事もあります。
当サイトでは、軽量化の為fontawesomeを読み込まないようにしています。
ただ、使用するアイコンが少数ですが決まっているのでSVGで表示しています。
（このページは単独で読み込んでいます）
fontawesomeの表示
fontawesomeの色指定はCSSで行うことが多い。
検索してもCSSで表示しよう！というものが多かったので、この記事を書いてみました。
fontawesomeの表示
例えばFacebookのアイコンのfontawesomeは？
下記のコードで表示する事ができますね？
<i class="fab fa-facebook-square"></i>fontawesomeの応用表示
大きくしたい場合は？
<i class="fab fa-facebook-square fa-3x"></i>「fa-2x」や「fa-3x」などを加えればサイズも変えられます。
スピンもできますね？
<i class="fas fa-compass fa-spin"></i>「fa-spin」を加えれば回転動画もできます。回転もできますね？
<i class="fab fa-facebook-square fa-rotate-180"></i>「fa-rotate」の他に「fa-flip-horizontal」「fa-flip-vertical」などを使用して方向を変えられます
fontawesomeの色指定
fontawesomeの色指定はCSSで行う事が多いですね？
fontawesomeをCSSで色指定するのは？
見出しでの使用。
メニューでの使用。
共通でよく使用するものはCSSを呼び込んだ方が早いですね？
今回はスタイルシートに記載して読み込む方法は省略。
エディター完結色指定
スタイルシートを使わないでfontawesomeのアイコンに色をつけたい！
fontawesomeの色指定は記事内で完結したい！
検索してもfontawesomeはCSSで色指定しよう！
というものばかり。
fontawesomeの色指定はできる！
特別な事を言えば…
このページの下の表の様にfontawesomeに多数の色を付けたものを表示する場合…
CSSに記載したら？
このページの為だけに、かなりの数の行数が必要になります。
無駄な気がする……
styleを使ってfontawesomeの色指定
「style」を使えばCSSを使わないで記事内で完結します。
fontawesomeの色指定は？
「style」を挿入させて記事内のHTMLだけで色指定ができます。
<i class="fab fa-facebook-square" style="color: royalblue;"></i>重要なのはwebカラーの指定「16進数」ではない事。
色名で指定します。
「style=”color: ◯◯◯◯;”」を加える事で
fontawesomeのアイコンに色が付けられます。
色名は指定の色名になっています。
fontawesomeで使えるカラーチャート
fontawesomeに対応している色名は下記になります。
色名をコピーしてお使いください。
<i class="fontawesomeのフォント名" style="color:◯◯◯◯;"></i>そもそも…
自分の為の色指定帳が欲しかったので、少し手を加えてみました。
パソコンでの閲覧を推奨しています。
webカラーの色名表（基本色）
| Monocromatic | ||
| white | whitesmoke | gainsboro |
| lightgrey | silver | darkgray |
| gray | dimgray | black |
| Red | ||
| snow | lightcoral | rosybrown |
| indianred | red | firebrick |
| brown | darkred | maroon |
| Yellow | ||
| ivory | lightyellow | beige |
| lightgoldenrodyellow | yellow | olive |
| Green | ||
| honeydew | palegreen | lightgreen |
| darkseagreen | lime | limegreen |
| forestgreen | green | darkgreen |
| Cyan | ||
| azure | lightcyan | paleturquoise |
| cyan | aqua | darkcyan |
| teal | darkslategray | |
| Blue | ||
| ghostwhite | lavender | blue |
| mediumblue | darkblue | midnightblue |
| navy | ||
| Magenta | ||
| thistle | plum | violet |
| magenta | fuchsia | darkmagenta |
| purple | ||
webカラーの色名表（バリエーション）
中間色などの色名を記載しておきます。
| mistyrose | salmon | tomato |
| darksalmon | lightsalmon | coral |
| orangered | sienna | seashell |
| chocolate | saddlebrown | sandybrown |
| peachpuff | linen | peru |
| bisque | darkorange | antiquewhite |
| burlywood | tan | blanchedalmond |
| navajowhite | papayawhip | moccasin |
| oldlace | wheat | orange |
| floralwhite | darkgoldenrod | goldenrod |
| cornsilk | gold | lemonchiffon |
| palegoldenrod | khaki | darkkhaki |
| yellowgreen | olivedrab | darkolivegreen |
| greenyellow | chartreuse | lawngreen |
| mediumseagreen | seagreen | mintcream |
| springgreen | mediumaquamarine | turquoise |
| lightseagreen | mediumturquoise | aquamarine |
| cadetblue< | darkturquoise | powderblue |
| lightblue | deepskyblue | skyblue |
| lightskyblue | steelblue | dodgerblue |
| lightslategray | slategray | lightsteelblue |
| cornflowerblue | royalblue | mediumslateblue |
| slateblue | darkslateblue | mediumpurple |
| blueviolet | indigo | darkorchid |
| darkviolet | mediumorchid | orchid |
| mediumvioletred | deeppink | hotpink |
| lavenderblush | palevioletred | crimson |
| pink | lightpink | – |
参考記事参考にさせていただいたwebカラーサイト
⚫︎ COLOR 216
fontawesomeの表示でよくある質問
- なぜ16進数（#ff0000等）ではなく「色名」を使うのですか？
-
CSSを1行も追加せずに、その場（HTML内）だけで色指定を完結させるためです。
通常、16進数で細かく指定しようとすると、管理のために外部CSSへクラスを書く手間が発生しがちです。しかし、ブラウザ標準の「色名」を使えば、HTMLの style=”color: 色名;” だけで確実に色が反映されます。CSSファイルを太らせず、テンプレートも汚さない。この「手軽さ」こそが最大の実用的なメリットです。 - 記事ごとにアイコンの色を使い分ける際の「賢い」活用法は？
-
CSSの管理を捨てて、このチャートを「カラーパレット」として使い倒すことです。
「特定の記事だけで使いたい色」のためにわざわざCSSにコードを書き足すと、サイト全体の読み込みが重くなり、管理も煩雑になります。この記事をブックマークしておき、必要なときに色名をコピーして記事内に直書きする。このワークフローこそが、サイトのメンテナンス性を高めつつ、表現力を最大化する賢い活用法です。 - 色名指定だと、デザインが制限されませんか？
-
むしろ、140色以上の「厳選された色」が使えるため、デザインに迷いがなくなります。
16進数は数千万色ありますが、多すぎて逆に迷いが生じ、サイト内の色がバラバラになる原因になります。このチャートにある140種類以上の標準色名は、ブラウザが共通して認識する「外さない色」です。この中から選ぶというルールを作るだけで、サイト全体に統一感が生まれ、かつスピーディに執筆を進めることができます。 - Font Awesomeの色指定を「色名」にする際の注意点は？
-
スペルミスを防ぐために、必ずチャートから「コピー＆ペースト」することです。
唯一のデメリットは、1文字でも間違えると色が出ないことです（例：gray と grey の混在など）。だからこそ、このカラーチャートを横に開きながら作業し、確実にスペルをコピペすることで、余計なデバッグ（表示されない原因探し）の時間をゼロにできます。
関連のお勧め記事
fontawesomeの表示 まとめ
fontawesomeはとても良いサービスですが、時折ページが重くなったりもしました。
かなり多用していたこともありますが、この際「fontawesome」から離脱しようと思い、排除しました。
その際、このページがあったことをすっかり忘れており、アイコンが表示されていませんでした。
深くお詫びいたします。
改めて、このページだけは読み込むように設定し復活いたしました。
fontawesomeによって視覚的にデザインが加えられるので、テキストだけでない表示が可能です。
色々な使い方をしてサイトを華やかにしてみましょう。
