アイコンフォントのリンク下線はinline-blockで消せます。

作成日:

aタグの中にFont Awesomeのアイコンフォントと文字列を入れると、標準状態で、こんな感じになります。

アイコンフォントのリンク下線
アイコンフォントのリンク下線

でも、見た目としてはやっぱりアイコンの下に下線が入るのは不格好。

で、そういうときはスタイルシートに

CSS
.fa:before{
   display: inline-block;
   text-decoration: none;
}

としてやれば下線が消えます。

参考:

favicon
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...

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。