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

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


開発

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

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

で、そういうときは、

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

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

参考:

Font Awesome Text-Decoration and Link Underline
参考
Font Awesome Text-Decoration and Link 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!

David Walsh Blog

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

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


開発

aタグの中にFont Awesomeのアイコンフォントと文字列を入れると、標準状態で、こんな感じになります。 でも、見た目としてはやっぱりアイコンの下に下線が入るのは不格好。 で、そういうときは、 .fa:before{…


関連する記事



こちらはいかが?


Bootstrapの変数を自分のSCSS(SASS)で使う方法
Bootstrapの変数を自分のSCSS(SASS)で使う方法

bootstrapのソースファイルを一括ダウンロードすると、その中には複数のscssファイルが格納されています。 通常、bootstrapの色や幅などの数値を変更するにはその中にある _variables.scss の中…

コメントを残す