[CSS]Font Awesomeのアイコンを細く見せたい場合の対処法

CSS

2017.01.122017.02.18

CSSでFont AwesomeのWEBアイコンフォントを細く表示する方法のご紹介です。

Font Awesomeアイコンそのものは細くすることはできないですが、CSSのfont-smoothingとtext-strokeプロパティを使うことで、見た目を細くするなどの調整を行うことができます。

Font Awesomeのアイコンを細く表示

Font Awesomeから使用したいアイコンを選択していくと、<i>タグが発行されるかと思います。
この<i>タグに対して、CSSで以下のような指定を行います。

i.fa {
  -webkit-font-smoothing:antialiased;
  -webkit-text-stroke-color:#fff;
  -webkit-text-stroke-width:1px
}

i.fa {

-webkit-font-smoothing:antialiased;

-webkit-text-stroke-color:#fff;

-webkit-text-stroke-width:1px

}

font-smoothingは文字のアンチエイリアスを調整するプロパティで、antialiasedを指定すると「滑らか」に表示できるようになります。

text-strokeは文字のアウトラインをデザインするプロパティで、-webkit-text-stroke-colorでアウトラインの「色」を、webkit-text-stroke-widthでアウトラインの「太さ」を調整することができます。また、2つのプロパティをまとめて-webkit-text-stroke:1px #fffのように指定することも可能です。

※上記例のtext-strokeで指定されているカラー（#fff）は、アイコンを表示させる要素の背景色に合わせるにしてください。