Azure Wordpress网站上缺少图标

Question

我通过Azure网站库创建了一个WordPress Azure网站。我安装了一个名为 Bridge 的主题。

一切都运行得很好......除了我的网站桌面版本（通过Chrome，Firefox和IE）上出现没有图标。我在Windows手机上看到了图标。当我将窗口压缩到手机大小时，我没有在桌面网站上看到图标。

为您提供有关此问题可能来自何处的背景信息... 我使用了自定义域名。要使WordPress站点使用自定义域，我已将此代码添加到wp-config.php文件中：

/*Emma added the below to fix permalink to be custom domain*/
define('WP_HOME','http://examplesite.com');
define('WP_SITEURL','http://examplesite.com);

上面的代码意味着，一旦您点击帖子或页面并离开主页，该网址仍然是examplesite.com/pagename而不是examplesite.azurewebsites.net/pagename。

回到图标问题......

图标通过使用字体显示（确切地说font-awesome）。我有主题的最新更新和最新的4.2.0版本的字体是在字体文件中。字体文件可以在我的网站上找到：

  

wp-content＆gt;主题＆gt;桥＆gt; css＆gt; font-awesome＆gt;字体

我问Bridge主题团队为什么没有显示图标。他们回答说：

  

发生这种情况的原因是您的网站拒绝跨域访问。您应该将此代码粘贴到位于的htaccess文件中   WP安装目录：

     

<ifModule mod_headers.c>
Header set Access-Control-Allow-Origin: http://examplesite.com
</ifModule>

  

我没有.htaccess文件，因为我的网站在Azure上运行。根据我的理解.htaccess文件链接到Apache。我有一个web.config文件和一个web-config.php文件，而不是.htaccess文件，因为我是从Azure安装的。

我在网站的根目录中创建了一个.htaccess文件并粘贴了上面的代码。当然那没用。我还查找了如何编写web.config版本的代码并将其粘贴到web.config文件中并且不起作用（尽管我对这个领域知之甚少，语法可能是错误的）并且没有工作。请参阅以下代码：

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="http://examplesite.com" />
  </customHeaders>
</httpProtocol>

我还将此添加到web.config文件中并且无法正常工作：

    <remove fileExtension=".svg" />
    <remove fileExtension=".eot" />
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".svg" mimeType="image/svg+xml"  />
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    <mimeMap fileExtension=".woff" mimeType="application/x-woff" />

我已经读过我还需要将buildAction更改为“content”，但不确定如何执行此操作，因为当您单击.woff等文件的属性时，您似乎没有获得该选项。

我还在我编写的自定义代码下添加了一些web.config.php文件，以使我的域工作，但这也无效。再一次，不确定我的代码是否正确。

我回到Bridge主题的支持团队，他们说我应该联系我的托管服务提供商为我这样做。因为.htaccess无法在这种类型的服务器上运行。 < / p>

所以，现在我不太清楚该怎么做。

有没有人知道我应该在我的web.config，web-config.php或其他文件中输入正确的代码？或者，这里有另一个问题我不明白吗？也许就像在自定义css中添加一些内容来调用字体一样简单？

我想知道我在上面的陈述中是否有线索......  “一切都工作得很好......除了，我的网站桌面版本（通过Chrome，Firefox和IE）都没有显示图标。我在Windows手机上看到了图标。我在桌面网站上看不到图标当我把窗户挤到手机大小时。“

如果我可以在手机上看到它们，那么肯定这意味着在某些时候图标正在正确呈现？

我查看了我的css文件，了解了通过媒体查询呈现网站的方式，但也没有找到任何内容。

Answer 1

经过数小时搜索解决方案后，我发现了这篇文章：Windows Azure CDN and *.woff fonts

我将此代码作为system.webserver：

的子代复制到我的web.config文件中

 <httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Methods" value="HEAD,GET,OPTIONS" />
  </customHeaders>
 </httpProtocol>

这似乎解决了它！ ：）

已在Chrome，FireFox，IE和移动设备上进行过测试，所有图标现已显示。魔术！