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

fontawesome（フォントオーサム）はとても便利なアイコンです。

画像より扱いやすく！

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

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

私も使用しています…

fontawesome色を変えたい時は？

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

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

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

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

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

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

fontawesomeの表示

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

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

fontawesomeの表示

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

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

←こんな感じのもの

fontawesomeの応用表示

←こんな感じのもの

「fa-2x」や「fa-3x」などを加えればサイズも変えられます。

←こんな感じのもの

「fa-spin」を加えれば回転動画もできます。

←こんな感じのもの

「fa-rotate」の他に

「fa-flip-horizontal」

「fa-flip-vertical」

などを使用して方向を変えられます。

fontawesomeの色指定

fontawesomeの色指定はCSSで行う事が多いですね？

fontawesomeをCSSで色指定するのは？

共通でよく使用するものはCSSを呼び込んだ方が早いですね？

今回はスタイルシートに記載して読み込む方法は省略。

エディター完結色指定

スタイルシートを使わないでfontawesomeのアイコンに色をつけたい！

fontawesomeの色指定は記事内で完結したい！

検索してもfontawesomeはCSSで色指定しよう！

というものばかり。

特別な事を言えば…

このページの下の表の様に

fontawesomeに多数の色を付けたものを表示する場合…

CSSに記載したら？

このページの為だけに、かなりの数の行数が必要になります。

無駄な気がする……

styleを使ってfontawesomeの色指定

「style」を使えばCSSを使わないで記事内で完結します。

←こんな感じのもの

重要なのはwebカラーの指定「16進数」ではない事。

「style="color: ◯◯◯◯;"」を加える事で

fontawesomeのアイコンに色が付けられます。

色名は指定の色名になっています。

fontawesomeで使える色名

fontawesomeに対応している色名は下記になります。

色名をコピーしてお使いください。

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

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

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	–

関連のお勧め記事