字体和图标问题

CORS和Font真棒

X/Pro主题和独立的Cornerstone插件使用了Font Awesome库来可视化图标。Fontawesome是一个字体图标库，你可以在你的网站上使用。字体图标使用基于文本的字体来显示图标而不是图像，这确保您可以使用所有与字体相关的CSS代码来使图标变大或变小或改变颜色，而不需要改变图像。

与字体Awesome图标缺失相关的一个常见问题是由于请求的域超出了资源起源的域。要解决这个问题，您需要启用一个名为歌珥．点击在这里查阅更多有关CORS的资料。

启用CORS是相对简单和直接的。下面，我们将介绍如何在Apache, Nginx上启用CORS＆不过，首先，我们将介绍如何找出你的网站运行在什么技术上，如果你还不知道的话。

寻找服务器软件

有许多工具可以找出您的托管服务提供商使用的web服务器。您可以使用Netcraft网站来了解您的服务器。遵循以下步骤:

1. 点击进入Netcraft网站在这里．
2. 将网站的URL或域名添加到工具中，以显示网站的详细信息。在我们的例子中，我们添加了WordPress.org．
3. 搜索Web服务器下承载历史找出该网站使用的网络服务器。在我们的例子中，它使用Nginx．

现在你知道了你使用的web服务器，根据适合你的情况，遵循以下步骤:

在Apache上启用CORS

在本节中，我们将介绍在apache上启用CORS，本文将介绍.htaccess方法，而不是httpd.conf方法，两者都工作得很好，没有一个比另一个更好。

打开你的.htaccess文件。你可以通过FTP或cPanel的文件管理器访问你的.htaccess文件。一旦你打开了它，它应该是这样的:

上面的图片是默认的WordPress .htaccess单站点安装，安装在一个域的根目录下。你的简历可能会因为一些因素而有所不同。

• 如果您使用单站点或多站点安装
• 你最初使用的是哪个版本的WordPress，也就是说，如果你在WordPress 3.4或更低的版本上使用多站点安装来启动你的网站，你会有一个不同的版本．htaccess比目前多站点安装。
• 例如，如果你在根路径以外的目录中安装了WordPress，/ public_html / mycoolsite而不仅仅是/ public_html．
• 你可以找到大多数“默认”WordPress .htaccess文件的例子在这里．
• 现在在你当前的WordPress规则上面，添加以下内容:

头添加Access-Control-Allow-Headers "*"头添加Access-Control-Allow-Headers "origin, x-requested-with, content-type"头添加Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

保存文件，CORS将在服务器上激活。

在iis7.0及以上启用CORS

在我们开始之前，您应该注意有许多不同的IIS设置和配置可能性，因此我们不可能涵盖所有情况，但希望下面的内容可以帮助您开始。打开你的网。配置，它应该看起来类似于:

上面的图片是针对IIS 7.0 web的。配置使用WordPress单站点安装和漂亮的永久链接。

将以下内容添加到您的网页中。配置文件:

保存文件，CORS将在服务器上激活。

在Nginx上启用CORS

在我们继续之前，你应该对Nginx配置和服务器块有一个基本的了解。如果您在添加代码时遇到任何问题或不知道在哪里添加代码，我们建议您联系托管提供商寻求帮助。如果你不能直接访问你的服务器，你可能也需要他们的帮助。

有两种方法来包含代码，我们即将添加，你可以将它包括在你的服务器块(包括它多次，如果你有多个服务器块)，或者你可以将它包括在一个目录下，如/etc/nginx/cors并保存为cors_support。然后在你的服务器块中，添加:

包括cors_support;

因此，打开您想要添加cors支持的文件，或按上面解释的那样创建文件，并输入以下代码。

# # CORS配置nginx # location / {if ($request_method = 'OPTIONS') {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';# #自定义标头和标头各种浏览器*应该*是OK的，但不是# add_header '访问控制-允许标头' 'DNT,X-CustomHeader,Keep-Alive，用户代理，X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';# #告诉客户端这个飞行前信息在20天内有效# add_header 'Access-Control-Max-Age' 1728000;add_header 'Content-Type' 'text/plain charset=UTF-8';add_header 'Content-Length' 0;返回204;} if ($request_method = 'POST') {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; } if ($request_method = 'GET') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; } }

根据您的具体配置和设置，您可能会得到如下警告:

这里不允许使用"add_header"指令

如果你得到这样的错误，使用SSH连接到运行nginx的服务器并输入:

安装nginx-extras

这将启用more_set_headers配置。

未找到404错误

最常见的原因是在微软的IIS web服务器上，IIS默认不启用。woff或。woff2 mime类型，所以我们需要添加一些额外的规则到web。为此配置。

打开你的网。配置文件(适用于iis7或更高版本)并添加以下内容:

<删除fileExtension = "。woff"/>     . woff2" mimeType="application/x-font-woff

如果你使用默认网页。配置WordPress，你会看到这样的东西:

<？xml version="1.0" encoding="UTF-8"?>       <条件>                  < / >

保存，字体Awesome现在应该工作了。

字体Awesome 5集成

我们已经更新了我们的字体Awesome集成，以支持v5.0.0+的图标，其中包括一个完全改版的风格在整个集合。新版的Font Awesome库使用了另一种语法将图标添加到页面中。图标被分为几个部分，你应该知道哪个部分用于图标。

一般来说，这不会对你使用网站的构建器添加字体图标的方式产生任何影响，但如果你在之前的版本中直接将字体awesome代码添加到网站中，你需要改变代码的语法以匹配版本5:

在Font Awesome版本5中，他们将图标分割成多种字体。的实例data-x-icon属性，将其直接添加到以下之一:

• data-x-icon-b为了社会偶像。
• data-x-icon-o用于大纲图标。
• data-x-icon-s对于实心图标。

联系托管服务提供商

字体相关的问题大多与服务器配置有关。这就是为什么你必须联系你的托管服务提供商，让他们为你跟进情况，特别是如果你自己没有技术能力直接启用CORS。

确保字体Awesome已启用

关于字体很棒的故障排除，要考虑的最后一点是，你需要确保它是启用的。你可以去查看X/Pro >主题选项>杂项>字体棒极了．

您将能够启用或禁用字体Awesome取决于标准权重，包括固体，常规的，光,品牌．

总结

我们已经讨论了字体图标呈现问题的可能原因，特别是我们的产品用来显示字体图标的字体Awesome库。188金宝搏官网登录-首页我们讨论了web服务器检测，并根据您使用的web服务器技术在服务器上启用CORS功能。我们也提到了5版的字体很棒的注意事项。最后，如果您仍然有问题，并且您的网站的字体图标不显示，请联系我们的支持团队，我们将很乐意帮助您。