【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にfaa-○○ animatedを加えて動かした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: FontAwesome;
	content: 'f188';/*好きなアイコン*/
	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;
}