株式会社コニファのマメ知識：無料の軽いアイコンフォント・ionicons（使える無料のwebサービス・ツール29）

コニファ・マメ知識：無料のアイコンフォント・ionicons

株式会社コニファ・無料で使えるBtoB WEB受注システム・0万石 WEB受注システム（バナー用3）

無料で使えるBtoB WEB受注システム
0万石 WEB受注システム

マメ知識・TOPページへ

無料の軽いアイコンフォント・ionicons（使える無料のwebサービス・ツール29）

無料のアイコンフォントは数多く存在しますが、シンプルでかつデザイン性に優れ、使い勝手が良く、グリフの数が多すぎず少なすぎず、というアイコンフォントを筆者は求めています。グリフの数が少なすぎては、汎用性に欠けます。かといって多すぎると、コードを探し出すのに手間がかかりますし、デザインの統一感が保たれていないものも散見されます。そんな欲張りな自分の希望に合っているアイコンフォントのひとつがこのioniconsです。

bootstrapのCSSフレームワークのように、CSSの記述を追加することなく、軽便にアイコン付きボタンなどを作成したりできませんが、逆に言うとbootstrapよりも自由にアイコンの色やサイズをカスタマイズすることができます。設置もbootstrapよりもずっと軽く済むので、用途に応じて使い分けるのが良いかもしれません。また、このフォントはオープンソースのMITライセンスなので、商用でも自由に使えます。

http://ionicons.com/

使い方

（１） i要素にクラスを指定して設置

<head>にCDNを利用して、ionicons.cssを読み込みます。

<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

ioniconsのサイトにアクセスして、並んでいるグリフの一覧から使いたいものを選び、そのアイコンをクリックして下側に表示されるclass用のアイコン名をコピーします。

iタグのclass名に「icon」とコピーしたアイコン名を列記し、内容無しで iタグを閉じます。列記の仕方は、「icon」+半角のスペース+上でコピーした「ion-ios-calculator」。そして、アイコンを使用する箇所（このサンプルではh3タグ内）にこの iタグを入れます。

<h3 class="title">
    <i class="icon ion-calculator"></i><span>&nbsp;各種集計メニュー</span>
</h3>

iタグをh3要素に入れた実際のサンプル

各種集計メニュー

発注メニュー

各種設定メニュー

インフォメーション

同様のiタグをbutton要素に入れたサンプル

（２）同じアイコンが並ぶ場合、:before疑似要素を使って、アイコン表示

（１）と同様に、<head>にCDNを利用して、ionicons.cssを読み込みます。
ioniconsのサイトにアクセスして、「Downroad」ボタンをクリックして、ioniconsのファイル一式（zip）をダウンロードします。
zipを解凍して、中にある「cheatsheet.html」をブラウザにドラッグして開きます。
アイコンごとに、サイズやclassname、Escaped HTML、CSS Contentなどの値が、一覧表示されますので、利用するアイコンの「CSS Content」の値をコピーします。

次のサンプル（liタグを使用）ソースのようなCSSのcontentの値にコピーしたものをペーストします。

.lmark li:before {
	content: "\f38e";
	font-family: ionicons;
	}

liタグに:before疑似要素を使って、リストマークの代わりに表示するサンプル

li要素1
li要素2
li要素3
li要素4

（３）htmlに直接16進表記の実体参照で表示

（１）と同様に、ionicons.cssを読み込みます。
使用する要素にCSSのfont-familyでioniconsを指定します。

.directly span {
	font-size:24px;
	font-family: ionicons;
	}

（２）と同様に、「cheatsheet.html」を開きます。
使用するフォントの「Escaped HTML」の値をコピーします。

使用する箇所にその値を記述します。

<div class="directly">
    『例えばクラウド型のアイコンなら、<span>&#xf37a;</span>や、
     <span>&#xf377;</span>、<span>&#xf379;</span>、
     <span>&#xf378;</span>などがあります。』
</div>

16進表記の実体参照で、直接表示したサンプル

『例えばクラウド型のアイコンなら、 や、 、 、 などがあります。』

マメ知識：無料の軽いアイコンフォント・ionicons