icon字体图标不显示解决方案

帝云CMS建站过程中有时会发现网站后台或者前端出现图标无法显示的问题，图标显示为方框状态了，如下图所示：

审查元素可以看到如下的报错信息

原因分析

这是因为跨域访问造成的，也就是访问的域名并不是网站填写的主域名。

网站设置中填写的是域名A，但使用域名B访问，就会存在跨域问题。

解决办法：

一、apache环境

方法1：

直接在网站根目录 .htaccess文件 中添加如下代码即可：

<IfModule mod_headers.c>
# Make sure proxies don’t deliver the wrong contentHeader append Vary User-Agent env=!dont-vary
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

方法2：

在httpd.conf 尾部加上

LoadModule headers_module modules/mod_headers.so

<IfModule mod_headers.c>
# Make sure proxies don’t deliver the wrong contentHeader append Vary User-Agent env=!dont-vary
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

二、Nginx环境

在nginx.conf 内部加上

location ~* \.(eot|ttf|woff|svg|otf|woff2)$ {
  add_header Access-Control-Allow-Origin *;
}

如果是宝塔面版，在网站配置文件中添加即可，如下图所示：

三、注意事项

1、如果用了CDN的话，需要配置HTTP头