如果你网站上的图标在一个域名下正常，在另外一个域名下无法显示那你就需要看看这篇文章了。没有多少杂技，只有干货。

为什么另外一个域名没有图标？

一般情况下是因为跨域问题，打开console你可以看到这么一段话：

Font from origin ‘http://liyaodong.sinaapp.com’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://liyaodong.com’ is therefore not allowed access.

解决办法？

1. 简单粗暴型

把字体文件放到绝对路径下，并且将要请求的页面加入到防盗链白名单。这是博主最后的做法，在折腾其他方法无果后。

2.一劳永逸法

添加Access-Control-Allow-Origin  Http header 。这个具体根据你所使用的后端语言不同方法不同，如果是wordpress可以有一个现成的插件可以用。WordPress-Cross-Domain-Plugin  但是博主亲测即时设置了也没用，因为你的js文件请求的直接是/fonts/xxx.woff|ttf文件，而你看这个文件的http头是没有被插件设置上header的。

那么问题来了该怎么办？机智的程序员灵光一现拍案说到，为什么不用.htaccess ？楼主机智，说的好。

[code]

Apache config

<FilesMatch ‘.(eot|ttf|otf|woff)‘> Header set Access-Control-Allow-Origin ‘*’

nginx config

if ($filename ~* ^.*?.(eot)|(ttf)|(woff)$){ add_header Access-Control-Allow-Origin *; } [/code]

参考链接：Cross-Domain Fonts

可我的是SAE主机，不支持自定义.htaccess，按照官方文档来看只支持一个叫Appconfig的东西，看了半天也没看出来怎么自定义这个header。所以我又拍了一下脑子，直接放到SAE的Storage里吧。然后再把css文件里的路径换成http://xxxx.com/fonts/xxx.xxx这样的路径，ok问题解决了。

恩，就到这里吧。好困，但是还想再来一篇。

注：头图来自@Mike