Line Awesomeをbeforeとかafterとかの疑似要素を使ってアイコン設定する方法

ラインが細いシュッとしたデザインにはいまいち使いにくいFont Awesomeですが、悩ましきデザイナーのためにicons8さんがLine Awesomeというものを作ってくれました。
Line AwesomeはFont Awesomeを元に作られたアイコンで、Font Awesomeと同じく手軽に扱えるのが魅力。Line Awesomeはアウトラインで構成されていますのでシュッとしたデザインにも馴染みやすいアイコンになっていますよ。
で、このLine Awesomeをbefore
とかafter
とかのCSS疑似要素で使いたーい!というのが今回のお題です。
公式ではたぶんアナウンスされてないですが、簡単ですのでやってみましょう。
まずはCSSを読み込む
まずはLine Awesomeを表示するためのCSSを読み込みます。CDNとして用意されているのでそのままコピペするだけです。
CSSファイルで@import
で読み込んでも、HTMLファイルでlink
を使って読み込んでもだいじょうぶです。common.cssとか共通のCSSを使う予定があるなら@import
でLine AwesomeのCSSを読み込んでおきましょう。
CSSに@import
を使うならこんな感じです。CSSファイルの先頭に書いてください。
@import url("https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css");
HTMLファイルで読み込むならこんな感じ。
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
読み込めたら準備は完了です。
CSSを設定する
Line Awesomeは説明があまりなくて優しくないですが、基本的な使い方はFont Awesomeと同じです。CSSの疑似要素に使用するときはUnicodeを使います。
Appleのアイコンで試してみますよ。
Line Awesomeにアクセスして、appleと検索して、目的のアイコンをクリック。
クリックするとモーダルウィンドウに色々な情報が表示されますので、右側にあるUnicodeをクリックしてUnicodeをコピーします。
コピーされたUnicodeは
となっていますが、実際に使用するのはf179
の部分だけ。
font-family
でLine Awesomeのフォントを指定して、before
やafter
などの疑似要素のcontent
に貼り付けます。content
に指定するときのバックスラッシュを忘れずに。
p:before { font-family:"Line Awesome Free","Line Awesome Brands"; content:"\f179"; /* バックスラッシュを忘れずに! */ }
SCSSの場合は@mixin
で下記のように定義しておけば@include
させるだけなので便利ですよ。
@mixin ICON { font-family:"Line Awesome Free","Line Awesome Brands"; } p { &:before { @include ICON; content:"\f179"; } }
というわけで、これで表示できました。
See the Pen
Line Awesome by Kuki Sashida (@my13ootleg)
on CodePen.
簡単ですね!
トラブル:アイコンが豆腐(□)になって表示できないときは…?
Line Awesomeに用意されているアイコンで豆腐(□←こんな四角)になって表示できないものがありますが、フォントのウェイトが指定されていないのが原因です。
そんなときはfont-weight
を指定すれば表示されます。
p:before { font-family:"Line Awesome Free","Line Awesome Brands"; content:"\f179"; font-weight:900; }
これもFont Awesomeと同じです。表示されねーじゃねーか!ってなったときに使ってみてください。
ではではー。

コメント