線形のWebフォントアイコン「Line Awesome」の使い方【無料】

こんにちは、hgmです。

今回は無料で使用することができるWebフォントアイコン「Line Awesome」についてご紹介します！

icons8.jp

 

2 Users

4 Pockets

Line Awesome — Free Beautiful Icon Font

https://icons8.jp/line-awesome

Replace Font Awesome with modern line icons with a single line of code.

「Line Awesome」では線形のアイコンを使用することができます。

よく使用されている「Font Awesome」は塗りつぶしのアイコンが無料で使用できますが、線形のアイコンは有料での使用となるため、「Font Awesome」のような雰囲気の線形アイコンを無料で使用したいときは「Line Awesome」がおすすめです！

また現在「Font Awesome」を使用している場合はリンクタグを変えるだけですぐに移行できます。

読み込み設定

CDNで設定

headタグ内に下記のリンクタグを設置します。

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

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

サーバーにフォントを置いて設定

こちらからZIPファイルをダウンロード後、headタグ内に下記のリンクタグを設置します。
パスは適宜変更してください。

<link rel="stylesheet" href="path/to/line-awesome/css/line-awesome-font-awesome.min.css">

使用方法

HTML上に下記のようなタグを入れることで表示できます。

<i class="las la-battery-three-quarters"></i>

アイコンはトップページにある一覧より任意のアイコンをクリックし、ポップアップ内のタグ記載の箇所をクリックでコピーできます。

::before、::afterの擬似要素に設定できるUnicodeの記載もあります。

フォント一覧でアイコンをマウスホバーすると「Font Awesome」から移行後のイメージが確認できます。

デモ

See the Pen
by Sara Higuma (@higuma)
on CodePen.0

※疑似要素で追加する場合は、記載のUnicodeから最初の「&#x」を外し代わりに「\（バックスラッシュ）」を入れてください。font-familyの指定も忘れずに！

content: "\f0e0";
font-family: "Line Awesome Free";