Font Awesome
MASAa.blog、ZMASAa.blog、MASAa.netでは、Font AwesomeのWebアイコンフォントを多用しており、もしFont Awesomeが無いとサイトが成り立たないほどです。
今回はこのFont AwesomeのWebアイコンフォントを、シャドー付きに設定する方法についてまとめてみました。
Font Awesohttps://masaa.net/me シャドー無し
通常の状態でFont AwesomeのWebアイコンフォントを表示した場合は次の様になります。
この場合のスタイルシートに記述のソースは下記の通りです。
.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軸方向オフセット
- △＝シャドーのぼかし具合
- ●＝シャドーのカラー
実際に設定するとこのような感じになります。
この場合のスタイルシートに記述のソースは下記の通りです。
.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アイコンフォントを見掛けたらこの方法で行ったんだなと思って下さい。
コメント