httpsにしたらioniconsが表示されなくなった問題

※2022年追記：リンクURLが変更になっておりましたので修正いたしました。

 

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

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

ioniconsって何？

一言で言うと無料で使えるWebアイコンセットです。

ioniconsの使い方について

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

ioniconsの公式サイト（サイトURLが変更になりました。）に移動してファイルをダウンロードするか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の指定はチートシートページ（リンクURLが変更になりました。）から確認できます。

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

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

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

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

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

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

<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に変えて無事解決といった次第です。

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