HOME サイトマップ 営業日カレンダー お問い合わせ

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


株式会社コニファ・ロゴ




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



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

  • マメ知識・TOPページへ

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

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

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

http://ionicons.com/

使い方

(1) 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要素に入れたサンプル

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

  • (1)と同様に、<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

(3)htmlに直接16進表記の実体参照で表示

  • (1)と同様に、ionicons.cssを読み込みます。
  • 使用する要素にCSSのfont-familyでioniconsを指定します。
.directly span {
	font-size:24px;
	font-family: ionicons;
	}
  • (2)と同様に、「cheatsheet.html」を開きます。
  • 使用するフォントの「Escaped HTML」の値をコピーします。
  • 使用する箇所にその値を記述します。
<div class="directly">
    『例えばクラウド型のアイコンなら、<span>&#xf37a;</span>や、
     <span>&#xf377;</span>、<span>&#xf379;</span>、
     <span>&#xf378;</span>などがあります。』
</div>
  • 16進表記の実体参照で、直接表示したサンプル
『例えばクラウド型のアイコンなら、 や、 、 、 などがあります。』

 


 



株式会社コニファ:ミニbanner画像include用-1(フルパス)

株式会社コニファのSaaS、ASP

  • ハンディターミナルを活用したシステム開発
  • SATOラベルプリンタ用システム開発
  • 耐洗ラベルプリントシステム開発
  • 定期配達・回収品管理システム
  • 無料で使える,0万石在庫照会システム,0円,Free
  • BtoB WEB受注システム
  • 0万石 WEB受注システム
  • 購買システム,既存のホストを利用するEDI連動型・百万石 購買システム,小口の仕入先,電子化,納期情報,コメント
  • 「BtoB WEB受注システム」PKI認証対応版
  • 「BtoB WEB受注システム」スマートフォン・iPad対応版


 

コニファHOME | サイトマップ | 会社案内 | お問い合わせ

Copyright© 2019 Conifer,Inc. All rights reserved.