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

有名なアイコンフォントでFontAwesome・Material Iconsがありますが、その次にIoniconsが有名といったところでしょうか。

私もそれぞれのアイコンフォントの使用方法について記事を書いていますが、検索履歴やアクセス履歴を見ると、Ioniconsも人気が高いです。

Ioniconsはアイコンの種類も多く揃っていますが、特段多いというわけではありません。

それではなぜ、人気があるのでしょうか。

Ioniconsのバージョン2で紹介されているサイトが多いですが、先だって最新バージョンを導入し、色々使用してみました!!

Ioniconsがどのようなアイコンフォントなのか、導入方法からカスタマイズ方法まで解説していきます。



 

Ioniconsとはどのようなアイコンフォントなのか?

IoniconsはMaterial style(マテリアルスタイル)とiOS向けに提供されているアイコンフォントです。

Material styleという言葉が出てきましたが、Material styleとはGoogleが提唱しているMaterial Design(マテリアルデザイン)の一つです。

簡単に言うと、パソコンやスマートフォンなどあらゆるデバイスでデザインを統一させて、誰でも使いやすくしましょうというものです。

 

Ioniconsは長らくバージョン2となっていましたが、2018年にバージョン4がリリースされ、現在はバージョン4.1.2までリリースされています。

アイコンは700種類を超えており、さらにCDNに対応しているので、初心者の方でも簡単に導入することができます!

Ionicons一覧

 

Ioniconsを導入する

先ほども記載のしました通り、IoniconsはCDNに対応しています。

CDNという何やら難しそうな言葉が出てきましたね。

私も最初このような横文字を見た瞬間、導入が難しそうだと感じました。

しかし、CDNは初心者でも簡単に導入できる素晴らしいものです。

CDNを簡単に言うと、ネット上にあるアイコンフォントを使用することです。

これにより、自身のサーバー上にアイコンを用意する必要がなくなり、大幅に手間が省けます!

 

肝心の導入方法ですが、下記コードをhead要素内<head>~</head>に含めるだけでアイコンを使用することができます。

<script src="https://unpkg.com/ionicons@4.1.2/dist/ionicons.js"></script>

なお、バージョンは更新されていきますので、上記コードの4.1.2は今後バージョンによって変更される場合があります。

最新バージョンは公式サイトから確認できます。

 

Ioniconsを表示する

IoniconsはMaterial style、またはiOSのデザインのどちらかで表示することができます。

CDNに対応しているので、アイコンを表示させるには各アイコンに用意されているコードを使用します。

それでは各デザインの表示方法をご説明します。

Material styleで表示する

試しに下にあるようなビールのアイコンの表示してみます。

 

looks_one公式サイトにアクセスし、お好みのアイコンを探してください。

Ioniconsの公式サイト

アイコンの一覧が表示されていますが、デザインのスタイルは切り替えることができます。

表示の切り替え

 

looks_twoアイコンをクリックし、表示されるコードをコピーしてください。

Ioniconsのコード確認方法

ちなみにコードをコピーする際に、コードの部分をクリックすると簡単にコピーできます。

Ioniconsの簡単コピー

 

looks_3コードをご自身のサイトに貼り付け、アイコンが問題なく表示されればOKです!

<ion-icon name="beer"></ion-icon>

 

サイト上では上記コードで表示されていますが、nameの部分にMaterial Designの先頭文字を取った下記コードでも表示することができます。

<ion-icon name="md-beer"></ion-icon>

 

iOSのデザインで表示する

iOSのデザインで表示する場合も、Material styleで表示する場合と手順は同じです。

試しに下にあるようなWi-Fiのアイコンを表示してみます。

 

looks_one同様に公式サイトに接続し、iOS styleの表示に切り替えます。

iOS styleに表示を切り替え

looks_twoアイコンをクリックし、コードをコピーします。

iOSのコード表示

アイコンをクリックするとコードが表示されますが、表示されるコードは常にMaterial style用のコードとなります。

コードを下記のように【ios-】を付けて変換してください。

<ion-icon name="ios-wifi"></ion-icon>

 

変換したコードをご自身のサイトに貼り付け、iOS用のアイコンが表示されればOKです!

 

Ioniconsをカスタマイズする

Ioniconsは色やサイズの変更など、カスタマイズすることができます。

HTMLまたはCSSで変更する方法をご説明します。

HTMLでカスタマイズする

style要素を使用し、アイコンの色とサイズを変更します。

カスタマイズ項目 HTMLコード
color: XXX;
サイズ font-size: XXpx;

例として、のアイコンの色を青色に、サイズは48pxを指定します。

なお、色の変更はカラー名またはRGB値を指定します。

<ion-icon name="umbrella" style="color: blue; font-size: 48px;"></ion-icon>

CSSでカスタマイズする

通常の文字を装飾するのと同様に、CSSでアイコンを装飾できます。

カスタマイズ項目 CSSコード
color: XXX;
サイズ font-size: XXpx;

例として、のアイコンの色をピンク色に、サイズは24pxを指定します。

<ion-icon name="heart" class="ion-color"></ion-icon>
.ion-color {
	color: pink;
	font-size: 24px;
}

 



 

まとめ

Ioniconの使い方についてご紹介しました。

IoniconはCDNに対応しており、コードもあらかじめ用意されているので、初心者の方でも簡単に使用できますね!

バージョン4になってから、公式サイトではアイコンの検索をかけることもできるようになり、使いやすさも格段に上がっています。

しかし、公式サイトは英語で、Ioniconを細かく解説しているサイトも少ないので、是非参考にしてください!!

バージョンは4とまだまだ発展途上のアイコンだと思うので、今後のアップデートにも注目したいですね。

他のアイコンフォントも記事にまとめていますので、よろしければご覧ください。

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

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

2018年4月8日
よっしー
Ioniconsでサイトをさらにおしゃれにしましょう!!

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






コメントを残す

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