Azure Wordpress 网站上缺少图标答案

【问题标题】：Icons missing on Azure Wordpress siteAzure Wordpress 网站上缺少图标
【发布时间】：2014-11-09 02:51:00
【问题描述】：

我通过 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);

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

回到图标问题……

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

wp-content > 主题 > 桥 > css > font-awesome > 字体

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

发生这种情况是因为您的网站被拒绝跨域访问。您应该将此代码粘贴到位于 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 更改为“内容”，但不确定如何执行此操作，因为当您单击 .woff 等文件的属性时，您似乎没有获得该选项。

我还尝试在我编写的自定义代码下的 web.config.php 文件中添加一些内容以使我的域正常工作，但这也不起作用。再次，不确定我的代码是否正确。

我回到 Bridge 主题的支持团队，他们说我应该联系我的托管服务提供商为我做这件事，因为 .htaccess 无法在这种类型的服务器上工作。

所以，现在我不太确定该怎么做。

有谁知道我应该将正确的代码放入我的 web.config、web-config.php 或其他文件中吗？或者，这里还有另一个我不理解的问题吗？也许像在自定义 css 中添加一些东西来调用字体一样简单？

我想知道我上面的陈述是否有线索...... “一切都很好......除了，我的网站的桌面版本上没有出现任何图标（通过 Chrome、Firefox 和 IE）。我在我的 Windows 手机上看到图标。我在桌面网站上没有看到图标当我把窗口压缩到手机大小时。”

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

我查看了我的 css 文件，以了解通过媒体查询呈现网站的方式发生了变化，但在那里也没有找到任何东西。

【问题讨论】：

您能否右键单击其中一个图标并查看输出到页面中的 URL？这可能有助于诊断发生了什么。
图标的html：
CSS.../*media all*/ .fa-search::before { content: "\f002"; }
好的，所以也许在css中寻找导入这些字体的行。它可能在 font-awesome.css 中。看看那条路是什么。
不确定在哪里可以找到这个难以捉摸的网址。我检查时的 css 来自 font-awesome.min.css。

标签： wordpress .htaccess azure web-config font-awesome

【解决方案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 和移动设备上进行了测试，现在所有图标都显示出来了。魔法！

【讨论】：