AwesomeのWEBアイコンフォントを細く表示する方法のご紹介です。Awesomeアイコンそのものは細くすることはできないですが、CSSのfont-smoothingとtext-strokeプロパティを使うことで、見た目を細くするなどの調整を行うことができます。Awesomeから使用したいアイコンを選択していくと、<i>タグが発行されるかと思います。この<i>タグに対して、CSSで以下のような指定を行います。{-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でアウトラインの「太さ」を調整することができます。#fffのように指定することも可能です。※上記例のtext-strokeで指定されているカラー(#fff)は、アイコンを表示させる要素の背景色に合わせるにしてください。コメントデータの処理方法の詳細はこちらをご覧ください。最新記事[WP]サイトで技術的な問題が発生しています。サイト管理者のメールを確認して指示に従ってください。