Web制作
線形のWebフォントアイコン「Line Awesome」の使い方【無料】
2021年08月14日 8:00
こんにちは、hgmです。
今回は無料で使用することができるWebフォントアイコン「Line Awesome」についてご紹介します！
「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">
「Font Awesome」を使用していて「Line Awesome」に変更する場合は、下記のリンクタグに変更します。
<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";
関連記事
この記事を書いた人
hgm
農業高校出身フロントエンドエンジニアの社員hgmです。 猫センサー搭載済みの愛猫家。 広い視野を持って日々邁進していきます！
