【お知らせ】このMASAa.netではWordPressテーマ Cocoonを採用しています。ここをクリックするとTHE THOR採用のZMASAa.blogを開きます。
WordPressブログ関連サービス

【WordPress】Font Awesome アイコンにシャドーを設定する方法

アイキャッチ画像 Font Awesome
この記事は約5分で読めます。
スポンサーリンク

Font Awesome

MASAa.blog、ZMASAa.blog、MASAa.netでは、Font AwesomeのWebアイコンフォントを多用しており、もしFont Awesomeが無いとサイトが成り立たないほどです。

MASAa.blog│パズドラ好きのmasaaが情報発信する1st WordPressブログサイト(THE THOR採用)
パズドラ好きのmasaaが情報発信する1st WordPressブログサイト(THE THOR採用)
ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト(THE THOR採用)
ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト(THE THOR採用)
MASAa.net | WordPressのカスタマイズとPCのある生活を楽しむための情報発信サイト
このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆるPC関連に関する情報を掲載しています。

今回はこのFont AwesomeのWebアイコンフォントを、シャドー付きに設定する方法についてまとめてみました。

Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

Font Awesohttps://masaa.net/me シャドー無し

通常の状態でFont AwesomeのWebアイコンフォントを表示した場合は次の様になります。

【WordPress】Font Awesome アイコンにシャドーを設定する方法

この場合のスタイルシートに記述のソースは下記の通りです。

.menu-item-10836:after { /*くるま*/
	font-family: "Font Awesome 5 Free";/*Font Awesome 5に設定*/
	content: "\f1b9"; /*アイコン*/
	font-weight: 600; /*フォント太さ*/
	font-size: 48px; /*アイコン大きさ */
	padding: 0 0 2px 0; /*アイコン余白*/
	color: #ff75a7; /*アイコン色*/
}
.menu-item-10837:after { /*生活・小物品・工具*/
	font-family: "Font Awesome 5 Free";/*Font Awesome 5に設定*/
	content: "\f1e6"; /*アイコン*/
	font-weight: 600; /*フォント太さ*/
	font-size: 48px; /*アイコン大きさ */
	padding: 0 0 2px 0; /*アイコン余白*/
	color: #ff75a7; /*アイコン色*/
}
.menu-item-10838:after { /*Audio&Visual*/
	font-family: "Font Awesome 5 Free";/*Font Awesome 5に設定*/
	content: "\f001"; /*アイコン*/
	font-weight: 600; /*フォント太さ*/
	font-size: 48px; /*アイコン大きさ */
	padding: 0 0 2px 0; /*アイコン余白*/
	color: #ff75a7; /*アイコン色*/
}

 

Font Awesome シャドー有り

それでは、Font AwesomeのWebアイコンフォントに対して、シャドーを設定を設定します。

シャドーの設定する記述は、

filter:drop-shadow(○px □px △px #●);

となります。

各設定項目については下記の通りとなります。

  • ○=シャドーのX軸方向オフセット
  • □=シャドーのY軸方向オフセット
  • △=シャドーのぼかし具合
  • ●=シャドーのカラー

実際に設定するとこのような感じになります。

【WordPress】Font Awesome アイコンにシャドーを設定する方法

この場合のスタイルシートに記述のソースは下記の通りです。

.menu-item-10836:after { /*くるま*/
	font-family: "Font Awesome 5 Free";/*Font Awesome 5に設定*/
	content: "\f1b9"; /*アイコン*/
	font-weight: 600; /*フォント太さ*/
	font-size: 48px; /*アイコン大きさ */
	padding: 0 0 2px 0; /*アイコン余白*/
	color: #ff75a7; /*アイコン色*/
	filter:drop-shadow(3px 3px 1px #bbb); /*シャドー(影)*/
}
.menu-item-10837:after { /*生活・小物品・工具*/
	font-family: "Font Awesome 5 Free";/*Font Awesome 5に設定*/
	content: "\f1e6"; /*アイコン*/
	font-weight: 600; /*フォント太さ*/
	font-size: 48px; /*アイコン大きさ */
	padding: 0 0 2px 0; /*アイコン余白*/
	color: #ff75a7; /*アイコン色*/
	filter:drop-shadow(3px 3px 1px #bbb); /*シャドー(影)*/
}
.menu-item-10838:after { /*Audio&Visual*/
	font-family: "Font Awesome 5 Free";/*Font Awesome 5に設定*/
	content: "\f001"; /*アイコン*/
	font-weight: 600; /*フォント太さ*/
	font-size: 48px; /*アイコン大きさ */
	padding: 0 0 2px 0; /*アイコン余白*/
	color: #ff75a7; /*アイコン色*/
	filter:drop-shadow(3px 3px 1px #bbb); /*シャドー(影)*/
}

最後に

Font AwesomeのWebアイコンフォントにシャドーを付けたことで立体感を増しました。

Font AwesomeのWebアイコンフォントのメニューだけを作成する場合など効果があると思います。

なお、今回はFont Awesomeのシャドー設定について掲載しましたが、【filter:drop-shadow】を使用したシャドー設定は他にも使用することができます。

と言うことで、【filter:drop-shadow】を使ってMASAa.blog、ZMASAa.blog、MASAa.netで設定しているFont AwesomeのWebアイコンフォントを一部シャドー化しておきました。

どのFont AwesomeのWebアイコンフォントをシャドー化したかについては特に記事にするつもりはないので、シャドー付きのFont AwesomeのWebアイコンフォントを見掛けたらこの方法で行ったんだなと思って下さい。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
天下大豪商
アーテリーギア-機動戦姫-
ナナリズムダッシュ
イース6オンライン
ザ・アンツ
魔剣伝説
FIFA MOBILE

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント