fontawesomeの色指定!CSSを使わない記事内でのアイコン色指定!手軽に使う色付きアイコン

fontawesomeの色指定!CSSを使わない記事内でのアイコン色指定!手軽に使う色付きアイコン

fontawesome(フォントアワサム)はとても便利なアイコンです。

画像より扱いやすく!

大きさや色の他、回転や反転も自由自在。

ブログでアイコンが自由に使えます。

私も使用しています…

fontawesome色を変えたい時は?

CSSで色指定するという方法が多くあります。

定形のもので使用する時は確かにスタイルシートで色指定する方が簡単。

fontawesomeのアイコンをブログの中で一つしか使用しない物…

わざわざCSSで色指定するのは無駄。

メニューやタイトルなどは共通ですが…

記事中のちょっとしたアイコンなど1度しか使わない事もあります。

fontawesomeの表示

fontawesomeの色指定はCSSで行うことが多い。

検索してもCSSで表示しよう!というものばかり。

fontawesomeの表示

例えばFacebookのアイコンのfontawesomeは?

下記のコードで表示する事ができますね?

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で色指定しよう!

というものばかり。

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>

そもそも…
自分の為の色指定帳が欲しかったので、少し手を加えてみました。

パソコンでの閲覧を推奨しています。

スマホでご覧頂くと一部文字がはみ出ます。
AMP表示の場合、全体的に表示が不十分です。

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
hartreuse lawngreen mediumseagreen seagreen
mintcream springgreen mediumaquamarine turquoise
lightseagreen mediumturquoise mediumspringgreen 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