wordpress - Azure Wordpress 网站上缺少图标

Question

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

一切都工作得很好...除了，我的网站的桌面版本上(通过 Chrome、Firefox 和 IE)没有图标。我在 Windows Phone 上看到图标。当我将窗口缩小到手机大小时，我在桌面网站上看不到图标。

为您提供一些有关此问题可能来自何处的背景信息……我使用了自定义域。为了使 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 > themes > bridge > css > font-awesome > fonts

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

This is happening because of cross-origin access is denied for your site. You should paste this code to htaccess file that is located in WP installation directory:

<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 文件，以了解通过媒体查询呈现网站的方式的更改，但也没有找到任何内容。

Answer 1

经过几个小时的寻找解决方案后，我发现了这篇文章:Windows Azure CDN and *.woff fonts

我将此代码复制到我的 web.config 文件中作为 system.webserver 的子文件:

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

这似乎解决了它! :)

已在 Chrome、FireFox、IE 和移动设备中进行测试，所有图标现已显示。魔法!