先日、CDN経由でcssを読み込みアイコンフォントを利用しているwebページを更新し、サーバーにアップしたところ、今まで問題なかったアイコンが表示されなくなりました。

CDNとは、Contents Delivery Network（コンテンツデリバリネットワーク）の略で、各種コンテンツをweb経由で配信するために最適化されたネットワークを指します。関連ページ（webデザインに関する用語まとめ）

ローカルで確認すると問題なく表示されるので、CDN（ioniconsを利用）のリンク は間違っていないようです。ということは、サイト側の問題になります。アップしているサイト（このページも同じですが）は、最近httpからhttpsに変更しています。CDNのリンクを確認すると、urlが「http://」から始まっているので、これを「https://」に変更したところアイコンが表示されるようになりました。

CDNの違いの検証

CDNリンクが「http://」、「https://」、「//」のときのアイコン表示検証です。

正しくアイコンが表示されたときの画像

サンプル1・「http://」で接続できないケース

次のようにCDNリンクを「http://」にしているサンプルページ1

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

サンプル2・「https://」で接続可能なケース

次のようにCDNリンクを「https://」にしているサンプルページ2

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

サンプル3・「//」で、httpでもhttpsでも接続可能なケース

「//」と記述すると、サイトがhttpでもhttpsでも接続できます。httpからhttpsに変更中、変更予定のときは便利です。ただし、ローカル側でのアイコン表示確認は、環境によりできない場合があります。
次のようにCDNリンクを「//」にしているサンプルページ3

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