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と同じです。表示されねーじゃねーか！ってなったときに使ってみてください。
ではではー。
コメント