アイコンフォントのリンク下線はinline-blockで消せます。
作成日:
2018年7月22日
aタグの中にFont Awesomeのアイコンフォントと文字列を入れると、標準状態で、こんな感じになります。

アイコンフォントのリンク下線
でも、見た目としてはやっぱりアイコンの下に下線が入るのは不格好。
で、そういうときはスタイルシートに
CSS
.fa:before{
display: inline-block;
text-decoration: none;
}
としてやれば下線が消えます。
参考:
Font Awesome Text-Decoration and Link Underline
https://davidwalsh.name/font-awesome-underline
One side effect of using icons within links is that the icons themselves now use the text-decoration of the link. Here's how I remove them!

物草 灸太郎
WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。
関連投稿
Loading...
コメントをどうぞ