前回のエントリーでこのウェブサイトが常時SSL化したとお伝えしたのですが、それに伴ってちょっとつまづいた問題が起こりました。

そう、ioniconsが表示されなくなったのです。その問題は意外に簡単に解決したのですが、あまり情報がなかったので書きます。

ioniconsって何？

一言で言うと無料で使えるWebアイコンセットです。このサイトでもところどころ使っていて、SERVISEページに主に利用しています。このページのアイコンは全てioniconsです。

ioniconsの使い方について

いろんなサイトにioniconsの使い方については解説があるのですが、簡単に言うとこうです。

ioniconsの公式サイトに移動してファイルをダウンロードするかCDN（コンテンツ・デリバリー・ネットワーク）のパスをCSSとしてheaderに読み込みます。以下はCDNの場合です。

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

こんな感じ

先ほどの公式サイトに移り、使いたいアイコンを選択します。

簡単なのはこんな感じです。

	<span class="ion-social-apple"></span>

←アップルが表示されてるでしょ？

その他css内にも使えます。例えばこんな感じ

li a:before{
content:"\f227";/*アップルアイコン*/
font-family: ionicons;
}

このUnicodeの指定はチートシートページから確認できます。

前置きが長くなりました。

httpsにしたらioniconsが表示されなくなった（本題）

常時SSL化するためにはサイト内のページや画像などを全てhttpsにしなければならないのですが、それはCDNなどの外部ファイルなどもhttpsである必要があります。

で、先ほどのCDN、「http」なんですねー。さてどうしようか。

ファイルをダウンロードして自分のサーバーにあげた

それなら自分のサーバにあげればいいじゃないということで、早速やってみました。

	<link rel="stylesheet" href="http://r-labs.jp/なんちゃら/ionicons-min.css">

これだと動きませんでした。なんでかは知りません。もういっそ別のアイコンフォントにしようかなと思った時。。

sつけてみたらどうだろう？

ふとこんな思いが浮かびまして、早速やってみました。

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

いけるやん。。

https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.cssありました。書いとけよって感じです。

で、早速上記のパスをCDNに変えて無事解決といった次第です。

最後までお読みくださいましてありがとうございました。