【Icon】計1001種類のデザインが揃った［Linearicons］が素敵！

このアイコン使いたい！

合計1,001種類のデザインが揃ったアイコンフォント［Linearicons］が可愛くて素敵です。
基本は有料になりますが、このうち170種類のアイコンをピックアップした無料版［Linearicons Free v1.0.0］も同時にリリースされていますね。

有料版 : Linearicons

無料版 : Linearicons Free v1.0.0

全アイコンのプレビューはコチラのリンク先からご覧いただけます。

データ形式はウェブフォント（アイコンフォント）用のファイル一式と、PDF版、SVG版の３種類が梱包されています。

Linearicons をアイコンフォントとして利用する方法

以下、無料で提供されている「Linearicons Free v1.0.0」を実際にダウンロードして、アイコンフォントとして利用する方法を紹介します。

ファイルをダウンロードする

まずは公式サイトの「Free Version」より、データファイルをダウンロードします。
下記のリンク先より「Download Now」をクリックするとスグにダウンロードがはじまります。

Linearicons Free v1.0.0 : https://linearicons.com/free

ファイルをサーバーにアップロードする

圧縮ファイルを展開した後、「Web Font」というディレクトリの中に、さらに「fonts」というフォルダが入っています。

中には「Linearicons-Free.eot」や「Linearicons-Free.woff」など、それぞれの拡張子が付いたフォントファイル一式が梱包されているはずです。

この「fonts」というフォルダごとサーバーにアップロードしましょう。

スタイルシートの設定

基本的には、元々「Web Font」フォルダの中に含まれている「style.css」をコピーして使えばOKです。
「style.css」の先頭には以下のようなコードが記述されていますので、各フォントファイルへのリンクが正しいかどうか、階層を確認してください。

@font-face {
	font-family: 'Linearicons-Free';
	src:url('fonts/Linearicons-Free.eot?w118d');
	src:url('fonts/Linearicons-Free.eot?#iefixw118d') format('embedded-opentype'),
		url('fonts/Linearicons-Free.woff2?w118d') format('woff2'),
		url('fonts/Linearicons-Free.woff?w118d') format('woff'),
		url('fonts/Linearicons-Free.ttf?w118d') format('truetype'),
		url('fonts/Linearicons-Free.svg?w118d#Linearicons-Free') format('svg');
	font-weight: normal;
	font-style: normal;
}

この「style.css」をHTMLファイルから読み込みます。

<link rel="stylesheet" href="style.css">

ここまでで【Linearicons】を使う準備は整いました。
あとはHTML側で、アイコンを表示させたい要素に定められたクラス名を付与していくだけです。

アイコンフォントを表示させる

基本は、アイコンフォントを表示させたい要素に class="lnr　lnr-xxx" というクラス名を付与します。
「xxx」の箇所をそれぞれ任意の文字列に書き換えます。

一例を挙げると以下のようになります。

<span class="lnr lnr-poop"></span>

<span class="lnr lnr-cloud"></span>

<span class="lnr lnr-music"></span>

<span class="lnr lnr-phone"></span>

<span class="lnr lnr-link"></span>

各アイコンがどのクラス名と紐づけられているかは、公式サイトのチートシートか、またはダウンロードしたフォルダ内にデモ用の「demo.html」が用意されているので参照してください。

Linearicons のダウンロードは以下より。

せっかく無料版が提供されているので、まずはお試しで使ってはいかがでしょうか。