簡単&無料で使えるウェブアイコンサービス「Line Awesome」の使い方

ウェブサイト制作には欠かせないアイコンですが、Font Awesomeは手軽だけど可愛すぎるってときに使える「Line Awesome」というサービスをご紹介しますよー！

CONTENTS

Line Awesomeとは？

Line Awesomeとは、ウェブアイコンサービスのFont Awesomeをリスペクト(？)して作られたウェブアイコンサービスです。

ウェブサイトにはこう書いてあります。

Swap Font Awesome for modern line icons in one line of code.

1行でFont Awesomeをモダンなラインアイコンに置き換える…と書いてある通り、Line AwesomeはFont Awesomeライクな実装方法で手軽に使うことができます。

それぞれを見比べてみるとこんな感じですね。

See the Pen
Font AwesomeとLine Awesome by イロイロデザインラボラトリ (@iroirodesignlab)
on CodePen.

どちらも同じアイコンですが、Line Awesomeのほうがシュッとしたアウトラインを基調としたデザインになっているのが分かると思います。

利用できるアイコン数はFont Awesomeよりは少ないですが、「このデザインにFont Awesomeは可愛すぎるんだぞっ☆」と言われたときに代替するには非常に便利なサービスとなっています。

Line AwesomeはCSSを読み込んで対象のコードをHTMLやCSSに書くだけです。どちらも簡単に使えるので、ぜひ使い方をマスターしておきましょう！

HTMLに書く場合でもCSSに書く場合でもLine AwesomeのCSSを読み込まないと使えません。

SCSSファイルに下記を@importで読み込みましょう。

@import "https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css";

CSSの場合は下記のコードでいってください。

@import url("https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css");

HTMLファイルを使う場合は<link>を使って<head>内で読み込んでおけばだいじょうぶです。

<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">

いずれも順番が逆だと使えませんので、Line AwesomeのCSSを読み込んだあとに対象のコードを書くようにしておいてください。

例えば特定の場所で「アイコンを1回しか使わない場合」は、HTMLファイルに直接書き込むのがおすすめです。

Line Awesomeでアイコンを検索して、<i>のHTMLをコピーして貼り付けます。

See the Pen
Line AwesomeをHTMLに書く by イロイロデザインラボラトリ (@iroirodesignlab)
on CodePen.

表示されましたね！

例えばリストマークなどで「アイコンを繰り返し使う場合」は、CSSのbeforeやafterといった疑似要素に設定するのがおすすめです。

疑似要素にfont-familyでLine Awesomeを読み込みます。

Line Awesomeでアイコンを検索して、Unicodeをコピーします。

コピーしたUnicodeは下4桁のみ使用するので、例えば「」をコピーしたら「f105」のみをcontentに書きます。

&:before {
  font-family: "Line Awesome Brands", "Line Awesome Free";
  content: "\f105"; // バックスラッシュは忘れずに！
}

最初にバックスラッシュを必ず入れておきましょう。

これで下記のような繰り返すような場合に表示できます。

See the Pen
Line AwesomeをCSSに書く by イロイロデザインラボラトリ (@iroirodesignlab)
on CodePen.

Font AwesomeもLine Awesomeも非常に便利なサービスなので、選択肢として持っておくといざというときに役に立ちます。

ぜひ、覚えておきましょうー！