• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

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

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

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

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

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



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください