sk51.log

The Averageman's web log.

ダウンロードせずにCDNですぐに使えるアイコンフォントまとめ


2015年11月13日 Web制作

Web制作でかかせないアイコンフォント。
数多くあるアイコンフォントの中から、ダウンロードせずにすぐに使えるフリーのアイコンフォントサービスをまとめました。

CDNを使用しているアイコンフォントであれば、CSSの読み込みだけですぐにアイコンフォントを使用することができます。
まずは、CSSファイルのみの読み込みで使用できるサービス3つをご紹介し、次にJavascriptの読み込みも必要なサービスをご紹介します。

1. Font Awesome


font-awesome

Font Awesome, the iconic font and CSS toolkit

現時点で、585個のアイコンをすぐに使用できます。
CDNは、MaxCDNを使用しています。
また、オプションも豊富でアイコンをそのまま使用するだけではなく、リスト、回転、アニメーションなどができます。
使用の際は、<i>タグに対してclassを適用します。

  • Font Awesome ライセンス

    • フォントライセンス: SIL OFL 1.1

    • コードライセンス: MIT License

使用方法:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<i class="fa fa-camera-retro"></i>

2. ionicons


ionicons

Ionicons: The premium icon font for Ionic Framework

ioniconsは、Ionic Frameworkのために用意されているアイコンですが、アイコン単独で使用することができます。
Ionic Frameworkは、モバイル用のフレームワークなので、アイコン自体もモバイルに最適化されています。
線が細いアイコンなので、縮小しても潰れることが少なく、レスポンシブデザインには相性がいいアイコンです。
現時点で、700以上のアイコンがあります。
使用するタグに指定はなく、任意のタグにclassを適用することで使用できます。

  • ionicons ライセンス

    • MIT License

使用方法:

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

<span class="ion-ionic"></span>

Google Material icons


google-material-icons

Icons – Style – Google design guidelines
Material icons guide – Google design
Googleが提唱するマテリアルデザインで使用されているアイコンセットです。
750以上のアイコンが、Google Fonts経由で使用することができます。
このMaterial iconsの場合、タグに対してclass=”material-icons”を指定し、表示したいアイコンは、アイコンの名前をタグで囲います。
これは、リガチャー(合字)と呼ばれる方法で、特定の文字列がある場合にアイコンに置き換わります。
ブラウザがサポートをしていない場合は、名前の代わりに、&xE87C;のような文字参照を使用します。
ただし、気をつけるブラウザはIEだけで十分で、IE10以上であればサポートしています。

  • Google Material iconsライセンス

    • Creative Common Attribution 4.0 International License (CC-BY 4.0)

使用方法:

<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<i class="material-icons">face</i>

4. Evil Icons


evil-icons

Evil Icons
Evil Iconsの特徴は、フォントファイルではなく、SVGファイルを使用したアイコンフォントで、線画を基本としたとても綺麗なアイコンです。
SVGのため、ブラウザがサポートしていな場合がありますが、Google Material Iconsと同様、IEにのみ注意すれば十分で、IE9以上であれば動作します。
サイズの変更は、data属性sizeに指定します。

  • ionicons ライセンス

    • MIT License

使用方法:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/evil-icons/1.7.8/evil-icons.min.css">
<script src="https://cdn.jsdelivr.net/evil-icons/1.7.8/evil-icons.min.js"></script>

<div data-icon="ei-archive"></div>
<div data-icon="ei-chart" data-size="s"></div>
<div data-icon="ei-check" data-size="m"></div>
<div data-icon="ei-spinner" data-size="m"></div>
<div data-icon="ei-cart" data-size="l" class="foo"></div>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

*

CAPTCHA