アイコンフォントの左右の下線に空白を表示させない方法は?

文字として扱われるのに、画像のように表示されるアイコンフォント

僕は「Font Awesome(フォントオーサム)」を使っているんですが、

  • 簡単に導入できる
  • 表示されるスピードが早い
  • CSSでデザインが簡単に調整できる

など、かなり使い勝手が良いので重宝しています。

ただ、文字として扱われるために、時にはこんな困ったことも。。

余白を設定すると下線が切れてしまう

その困ったこととは、左右に余白を設定すると下線が切れてしまうことです。

例えば、新規ウィンドウとして開くリンクの時だけわかりやすく「」のようなアイコンをつける方も多いと思いますが、文字とアイコンフォントの間に余白があると、下線が切れますよね?

コードはおそらく、このようになっていると思います。

/* 別ウインドウ */
.post a {
 text-decoration: underline;
}
.post a[target=_blank]:after {
 font-family: "FontAwesome";
 padding: 0 5px;
 content: "\f08e";
}

このままでも支障があるわけではありませんが、できればデザインを修正したいところです。

対処方法

そこで、

  • アイコンフォントにだけtext-decoration:none;を設定
  • position:absolute;を使って無理やり見た目を調整
  • テキストにborder-bottomを指定、アイコンフォントにborder-bottom:none;を指定
  • 新規ウィンドウのアイコンだけ画像を使う

などを試すと思いますが、この中で効果的なのは「画像を使う方法」だけです。

ただ、それだと本末転倒な気もしますし、実は、もっと簡単で良い方法があります。

それは、

  1. CSSのcontent: "";に半角スペースを追加する(テキストリンクの後ろのアイコンフォントを表示している場合)
  2. letter-spacingを追加する(テキストリンクの前のアイコンフォントを表示している場合)

です。それぞれコードをご紹介します。

疑似要素afterでアイコンフォントを表示している場合

テキストリンクの後にアイコンフォントを表示している場合は、このようなコードになります。

/* 別ウインドウ */
.post a {
 text-decoration: underline;
}
.post a[target=_blank]:after {
 font-family: "FontAwesome";
 content: " \f08e";
}

疑似要素beforeでアイコンフォントを表示している場合

テキストリンクの前にアイコンフォントを表示している場合は、このようなコードになります。

/* 別ウインドウ */
.post a {
 text-decoration: underline;
}
.post a[target=_blank]:before {
 font-family: "FontAwesome";
 content: "\f08e";
 letter-spacing: 5px;
}

まとめ

「JavaScriptで制御して、テキストリンクの部分だけspanで囲んで〜」みたいなことをする必要がないので、この方法が最もスマートではないでしょうか?

おそらく、すべてのアイコンフォントに共通する対処方法だと思うので、困っている方はぜひお試しあれ!

キャリアアップ 給料が安い?残業が多い?仕事を辞めたい20代の転職ハック。

キャリアアップ 初めての就職・転職が不安な方におすすめの転職エージェント

キャリアアップ ブラックな求人広告を見分けてホワイト企業に応募する方法。

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!