Font Awesomeのアイコンにボーダーをつける方法【text-shadowよありがとう】

みなさんこんにちは、ゆうやです！

米シェアオフィスの大手企業として日本でも有名なWeWorkが全社員の2割をリストラすることを発表した今日このごろ、いかがお過ごしでしょうか。

Web制作の現場ではお馴染みのウェブフォント Font Awesome。

本記事ではそのアイコンにボーダーをつけたい場合のTipsを紹介します！

結論：アイコンにtext-shadowをつける

方法はいたって簡単！

ボーダーをつけたいアイコンにcssでtext-shadowをつけるだけです！

例えば、以下のハートアイコンの形に沿ってボーダーをつけるとしましょう。

html

<i class="fas fa-heart HeartIcon"></i>

スタイリング用につけたHeartIconクラスにこんな感じでtext-shadowをつけます。

css

.HeartIcon{ text-shadow: 0 0 3px #000; }

ボーダーを細くしたい場合は、「3px」の部分を調整してください。

css

.HeartIcon{ text-shadow: 0 0 1px #000; }

上記を適用するとこんな感じで細ーいボーダーがつきます！

ぜひお試しあれです(^o^)

上記で紹介したTipsですが、「どんな時に使えるの？」と疑問に思う方もいらっしゃると思うので、僕が実際に使用したシチュエーションを紹介します！

それはずばり、、、

背景色がアイコンと同系色の色だったときです！

赤色の背景に赤色のアイコンを置いたらそりゃあ見えなくなりますよね笑

非常に極端な例ですが、背景色とハートアイコンの色が全く一緒だった場合こんな感じになります。（カラーコード#e2264d）

なにも見えませんね！笑

そこで活躍するのが上述した「アイコンにボーダーをつける」です！

ボーターつけると、こうなります↓↓

番外編です。

「Font Awesome アイコンボーダー」とブラウザで検索すると、だいたい表示されるのは見出しの通り「要素の外側にボーダーつける方法」だと思います。

こちらも至って簡単で、Font Awesome側で用意されているクラスをアイコンに付与するのみで実装できます！

fa-borderクラスを追加するだけ！

管理人

html

<i class="fas fa-heart HeartIcon fa-border"></i>

するとこんな感じになります！

これ、いったいどういうシチュエーションで使用するんでしょう？笑

いかがでしたでしょうか？

CSSに1行加えるだけでいいので簡単ですね！

今回、日本語の記事を見ていった所、全く解決策がヒットせず。。。

そんな時、救ってくれたのはStack Overflowのこちらのページでした（泣）

前々から「英語で調べるのが一番いいよ〜」と先輩エンジニアから聞いてはいましたが今回の件で初めてそう実感したので今後は日本語でだめな場合は英語で検索しようと思いました！

最後までご高覧いただきありがとうございました！