【CSS】Font Awesomeのアイコンをステッカー風にカスタマイズ

Font Awesomeって何？

「Font Awesome」はアイコン風のフォントです。

画像ではなく文字だから、色や大きさを変えたり、好きな場所に貼ることができます。
また、楽しい動きもカンタンに付けられます。

普通に使う

動かしてみる

Font Awesomeの使い方

「Font Awesome」の設定及び使い方の解説はこちらのサイトがわかりやすいです。

サルワカ | サルでも分かる図解説明マガジン
【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

Font Awesomeに影をつける

text-shadow:で影をつけただけ。

ソースコードを見る

HTMLコード

上記は 赤いリンゴのコードです。
classfa-kageに影を設定します。

CSSコード

.fa-kage {
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
}

Font Awesomeに白い縁取り

text-shadow:を上下左右にズラし、縁取りを入れました。

ソースコードを見る

HTMLコード

上記は 赤いリンゴのコードです。
classfa-fuchidoriに白い縁取りを設定します。

CSSコード

.fa-fuchidori {
	text-shadow: #fff 3px 3px 0, #fff -3px -3px 0, #fff -3px 3px 0, #fff 3px -3px 0, #fff 0px 3px 0, #fff 0 -3px 0, #fff -3px 0 0, #fff 3px 0 0;
}

Font Awesomeをステッカー風に

ひとつ前の白い縁取りに、さらに黒いシャドウを追加してステッカー風にしました。

HTMLコード

上記は 赤いリンゴのコードです。
classfa-stickerに白い縁取り＆黒いシャドウを設定します。

CSSコード

.fa-sticker{
	text-shadow: #fff 3px 3px 0, #fff -3px -3px 0, #fff -3px 3px 0, #fff 3px -3px 0, #fff 0px 3px 0, #fff 0 -3px 0, #fff -3px 0 0, #fff 3px 0 0, #000 2px 2px 4px, #000 0px 2px 4px, #000 2px 0 4px, #000 0px 2px 4px;
}

ステッカー風アイコンを動かしてみる

HTMLコードのclass=""にfa-shakeなどのアニメーションクラスを加えて動かしたver。
ペーパーマリオ感があってカワイイ。

ステッカーをメモに貼った風

メモにぺたっと貼る

メモにぺたっと貼る

メモにぺたっと貼る

ソースコードを見る

HTMLコード

メモにぺたっと貼る

<span>で作った立体的なメモに、:beforeの疑似要素でステッカーを貼っています。

CSSコード

.fa-memo {
  display: block;
  max-width: 300px; /*メモの幅*/
  background-color: #e5e4b1; /*メモの背景色*/
  position: relative;
  padding: 5px 5px 5px 60px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
.fa-memo:after {
  content: "";
  height: 10px;
  width: 60%;
  position: absolute;
  right: 10px;
  bottom: 20px;
  left: auto;
  z-index: -1;
  transform: skew(15deg) rotate(3deg);
  box-shadow: 0 16px 16px rgba(0, 0, 0, 1);
}
.fa-memo:before {
  position: absolute;
  margin: -10px 0 0 -50px;
  font-family: "Font Awesome 6 Free";
  content: "\f188"; /*好きなアイコン（メディスンボックス）*/
  font-weight: 900; /* Solidスタイルのアイコンを使用 */
  transform: rotate(45deg); /*傾き*/
  color: green; /*アイコンの色*/
  font-size: 40px;
  text-shadow: #fff 3px 3px 0, #fff -3px -3px 0, #fff -3px 3px 0, #fff 3px -3px 0, #fff 0px 3px 0, #fff 0 -3px 0, #fff -3px 0 0, #fff 3px 0 0, #000 2px 2px 4px, #000 0px 2px 4px, #000 2px 0 4px, #000 0px 2px 4px;
}

-CSS