Font awesomeでハマっていたCross-Origin Resource Sharingの対応した方法

S3 => CloudFrontをつかってAssets管理してます

自分の構築しているアプリケーションでは、S3 => CludFrontを通してassetsを呼び出している。主にEC2へのGetの回数を減らすためと、ページの読み込みスピードを上げるためにやっている。assetsのコンパイルはasset-syncを利用。

Font AwesomeがChromeとFFで表示されない

ところがFont AwesomeをFont AwesomeのGemで構築した時に、ChromeとFireFoxで豆腐現象が起こり、表示されなくなった。

Font AwesomeのCDNを使って解決

Qiita含めて英語を含むいろんなドキュメントを読んだのだが、（自分の技術力不足や読解力不足も手伝って）なかなか解決をせず苦悶していたところ、HTML5 expertsでGoogle Hosted Libraryのことを書いていたのを思い出し、Font Awesomeで提供しているCDNでやればいいんじゃね？ということで、入れてみた。

= stylesheet_link_tag "//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"

結果無事表示された。（しかも読み込みが気持ち早くなってる？）

rack-cors/Nginx/S3/CloudFrontでFont Awesomeのために色々いじくったが結局必要なくなった。