暮らしと生活便利館--シンプルスタイル--

生活

サイトをSSL(https)にしたらFont Awesomeのアイコンフォントが表示されない!

今月(2016年11月)になってサイトのデザインをリニューアルしました。ついでにSSLの設定も一緒に行ったのですが、困ったことに「Font Awesome」のアイコンフォントが表示されなくなりました。


デザインをリニューアルした段階ではきちんと表示されていたので、SSLの設定で何らかの問題が発生したようです。


ネットで検索したのですが、解決するための方法を見つけることができません!


私はCDN版の「Font Awesome」を利用していたのですが、念のためダウンロード版に変更したところ「Font Awesome」のアイコンフォントが表示されるようになりました。


私と同じようにSSLの設定後に「Font Awesome」が消えてしまった方は、ダウンロード版に変更してみてください。


ファイル一式は「Font Awesome」のサイトからダウンロードすることができます。

Font Awesomeダウンロード
「Font Awesome」の「Download」アイコンをクリックします。

Font Awesome zipファイルを解凍
ダウンロードした「font-awesome-4.7.0.zip」を解凍します。

Font Awesome「fonts」「CSS」フォルダ
必要なのは
1、「fonts」フォルダ
2、「CSS」フォルダの中にある「font-awesome.min.css」です。


Font Awesomeダウンロード版を使ってみよう
「fonts」フォルダと「CSS」フォルダの中にある「font-awesome.min.css」をFTPソフトでアップロードします。

「font-awesome.min.css」を使用するhtmlファイルの<head></head>内に<link rel="stylesheet" href="css/font-awesome.min.css">を記述します。

CSSファイルまでのパスは各自で変更してください。絶対パスで指定する場合、URLを「https」で記述しましょう。


あとはいつもの通り「fontawesome」のホームページで使用するアイコンを選択してタグをコピー&ペーストすればアイオンフォントが表示されます。