【2018年最新版】フリーで使えてCDN対応のアイコンフォントまとめ!

【2018年最新版】フリーで使えてCDN対応のアイコンフォントまとめ!のアイキャッチ画像

今回はフリーで使用でき、かつCDN対応のアイコンフォントをいくつかご紹介します!

アイコンを使用したいだけなのに、CDN対応と聞くと少し難しく聞こえるかもしれませんが、全くそんなことはありません!

CDN対応のアイコンフォントの導入はすぐに完了し、初心者の方でも簡単に利用できることがメリットです!

アイコンフォントはサイト作成の際に様々なシーンで使用され、多くのサイトで使用されているのを見かけます。

もはやサイト作成の必需品と言っても過言ではないものだと私は思っています。

例えば、よく見かけるものとして、下記のような例があります。

単独でアイコンフォントを使用。

色の変更からサイズの変更も自由に行えます!

アイコンフォントにアニメーションを付けて使用。

CSSなしで、様々なアニメーションがあらかじめ用意されているアイコンフォントもあります!

見出しにアイコンフォントを使用。

見出しにアイコンフォント

見出しの比較

ボタンにアイコンフォントを使用。

ボタンの比較

リストにアイコンフォントを使用。

  • Font Awesome
  • Material Icons
  • Foundation Icon Fonts

リストの比較

やはりアイコンを入れていると、サイト自体おしゃれになりますよね!

このようなことを画像の用意なしに、実現することができます!

まず、アイコンフォント初心者の方向けに、アイコンフォントとは、そしてCDNとは何かご説明します。



 

アイコンフォントとは?

アイコンフォントとはその名の通り、フォントとして扱われるアイコンです。

フォントとして扱われることで何が変わるの?

アイコンフォントの最大のメリットは、HTMLやCSSでアイコンの色やサイズなどを自由にカスタマイズできることです!

画像をアイコンとして使用している場合、色やサイズを変更する時はもちろん、元の画像を加工し直したり、仮にHTML等でサイズを変更してもぼやけたりしますよね。

アイコンフォントの場合、画像と比べると容量も軽量であることが多く、またアイコンのサイズを変更してもぼやけることはありません。

アイコンの使用には、各アイコンにあらかじめ用意されたコード(class)を使用するので、コードをコピペするだけで使用できます。

なので、初心者の方でも簡単に使用することができますね!

 

CDNとは?

CDNとは、コンテンツ・デリバリー・ネットワーク(Contents Delivery Network)の略称です。

ここでは、アイコンフォントを配信するための専用のネットワークと思ってください。

難しい説明は置いといて簡単に言うと、ネット上のアイコンを使用するということです。

つまり、自分のサイトにアイコンをアップロードしなくても、ネット上に置かれたアイコンを使用するので、アイコンを用意する手間がなくなります。

アイコンフォントの導入にはこのCDNを利用し、各アイコンフォントに用意されたCDNのコードをご自身のサイトのhead要素内<head>~</head>に入れるだけで導入は完了します!

 

CDN対応のアイコンフォント

CDNに対応したアイコンフォントを5種類ご紹介します!

なお、それぞれ共通してHTMLやCSSから、色やサイズを変更できます。

試しにの色とサイズを変更します。

文字を装飾するのと同じ要領で変更することができます!

項目 アイコン
サイズ

各アイコンフォントに関連記事として、使い方を細かく説明したリンクと、アイコンを簡単にカスタマイズできる自動作成ツールを用意したリンクを掲載しているので、是非ご参考・ご活用ください!

【Font Awesome】1番人気!簡単にアイコンをカスタマイズ可能!

FontAwesomeのトップ画像

Font Awesome公式サイトへ

Font Awesomeはアイコンフォントの中でも1番人気があり、最も使用されています。

アイコンには有料のものと無料のものがありますが、無料のアイコンでも現在989種類あります。

Font Awesomeの特徴としては、標準機能で豊富なカスタマイズ項目があります。

通常はCSSで複雑なコードを使用して実現できるものばかりですが、指定のコードを入れるだけで簡単に使用できます!!

2017年末にバージョン5をリリースし、アニメーション機能も大幅にアップデートされました。

試しにのアイコンの使用例をご紹介します。

項目 詳細 使用例
サイズ 10種類
向き 360度回転
ボーダー 有無
反転 上下左右反転
アニメーション 14種類

ほんの一例となりますので、他の詳しいカスタマイズは下記の記事をご覧ください。

Font Awesomeの使い方

【Web知識不要】Font Awesome 5の使い方とカスタマイズ方法を解析!!のアイキャッチ画像

【Web知識不要】Font Awesome 5の使い方とカスタマイズ方法を解析!!

2018年2月17日

Font Awesome自動作成ツール

Font Awesome 5自動作成ツール!アイコンを一覧表示しカスタマイズも楽々!のアイキャッチ画像

Font Awesome 5自動作成ツール!アイコンを一覧表示しカスタマイズも楽々!

2018年2月13日

 

【Material Icons】Google提供のアイコンフォント!

Material Iconsのトップ画像

Material Icons公式サイトへ

Material Icons(マテリアルアイコン)はGoogleが提供しているアイコンフォントです。

GoogleはMaterial Design(マテリアルデザイン)というものを2014年に提唱しており、Material IconsはMaterial Designの1つです。

パソコンでもスマートフォンでもアイコンは統一しましょうみたいなイメージです。

現在バージョンは3.0.1までリリースされており、アイコンの種類はFont Awesomeと同じくらいで、900種類を超えます。

特徴としては、音声読み上げソフトを使用すると、そのアイコンに適した音声で読み上げます。

さすがGoolge提供ということもあり、ユーザのことを考えた仕様ですね!

さらに、アイコンをSVGまたはPNGフォーマットで簡単にダウンロードできます。

Material Iconsのダウンロード方法

Material Iconsの使い方

【Google提供】マテリアルアイコンの使い方とカスタマイズ方法まとめ

2018年3月18日

Material Icons自動作成ツール

Googleマテリアルアイコンを自動作成!CSSのカスタマイズにも対応!のアイキャッチ画像

Googleマテリアルアイコンを自動作成!CSSのカスタマイズにも対応!

2018年3月22日

 

【Ionicons】レスポンシブデザインに適している!

Ioniconsのトップ画像

Ionicons公式サイトへ

Ioniconsはレスポンシブデザインに適したアイコンフォントです。

スマートフォンで表示する際にアイコンのサイズが縮小されますが、それでもかなり綺麗に表示されます。

現在バージョンは2.0.1までリリースされており、アイコンは700種類以上あります。

私が見た感じでは、他のアイコンフォントにあまりないアイコンが揃っている!気がします・・・笑

Ioniconsの使い方

初心者でも簡単!無料WEBアイコンフォントIonicons4の使い方まとめ!

2018年4月4日

 

【Foundation Icon Fonts】オーソドックスなアイコンフォント

Foundation Icon Fontsのトップ画像

Foundation Icon Fonts公式サイトへ

Foundation Icon FontsはZURBが提供しているアイコンフォントです。

公式サイトのクマ?がかわいいですね(笑)

現在バージョンはFoundation Icon Fonts 3までアップデートされており、アイコンは283種類あります。

特に目立った機能はなく、お好みのアイコンがあれば使用するくらいでしょう。

Foundation Icon Fontsの使い方

Foundation Icon Fonts 3 使い方 アイキャッチ画像

Foundation Icon Fonts 3の使い方と色やサイズの変更方法を解説!!

2018年3月12日

Foundation Icon Fonts自動作成ツール

Foundation Icon Fonts 3を自動作成!アイコンを一覧表示し色とサイズ変更にも対応!アイキャッチ画像

Foundation Icon Fonts 3を自動作成!アイコンを一覧表示し色とサイズ変更にも対応!

2018年3月17日

 

【Evil Icons】カスタマイズ済みのアイコンを使用可能!

Evil Iconsのトップ画像

Evil Icons公式サイトへ

Evil Iconsは初心者に非常に優しいアイコンです。

バージョンは1.9.0までリリースされており、アイコンは現在70種類のみです。

何が初心者に優しいのかと言うと、既に色が付けられたアイコンや、回転が付けられているアイコンを使用できます。

例えば、Twitterのアイコンの色はもちろん水色であり、他のアイコンフォントではCSS等で色を付ける必要があります。

しかし、Evil IconsでTwitterのアイコンを表示すると、のように色が既に付いている状態で表示されます。

さらに、のように既に回転が付けられているアイコンもあります。

Font Awesomeでも回転のカスタマイズは用意されていますが、回転させるようのclassを追加する必要があります。

しかし、Evil Iconsではその必要もありません。

アイコンの種類が少ないのが欠点ですが、お手軽に色や回転を加えられるのは、初心者にとっては嬉しいですね!

Evil Iconsの使い方

アイコンフォントEvil Iconsの使い方を解説!アニメーション機能もあり!のアイキャッチ画像

アイコンフォントEvil Iconsの使い方を解説!アニメーション機能もあり!

2018年4月7日


 

まとめ

CDNに対応した各アイコンフォントの特徴を簡単にご紹介しました。

やはり、Font Awesomeがアイコンの種類、カスタマイズの豊富さで使い勝手は1番良いでしょう。

また、アイコンもこれだけ種類があれば、ご自身のサイトに合うものが見つかりそうですね!

それぞれ導入も簡単にできるので、お好みのアイコンを探してみてください。

ご覧頂きありがとうございました。






コメントを残す

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