fontawesome图标字体库组件在服务器上显示不出来图标的解决

这个组件在我所开发的网站中被大量使用，为网站增色不少。在本地测试的时候所有图标都能显示出来，可一到服务器上就显示不出来了。网上查列出了可能的原因。其一，IIS没有注册字体类型。经过检查，不存在这个问题。其二，css路径不对，其三引用字体路径不对。我有点纳闷，在本地可是能正确显示的。查看了本地和服务器fontawesome图标字体库css 及字体所在的目录都存在。这会是哪里的问题。使用浏览器的审查元素功能，发觉字体所在路径是网站根目录/fonts下。图示如下：

显示的是404错误。这与本地路径不一致啊。本地我fontawesome组件所在路径为：/scripts/plugins/font-awesome4.5.0

其中引用的css文件路径为：/scripts/plugins/font-awesome4.5.0/css/font-awesome.css

字体路径：/scripts/plugins/font-awesome4.5.0/fonts

在font-awesome.css 对字体的引用是这样：

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

这在本地显示的字体路径是：
/scripts/plugins/font-awesome4.5.0/fonts/fontawesome-webfont.woff2?v=4.5.0 

怎么到服务器上字体路径变为根目录的fonts 下了。想到可能是asp.net mvc 的打包压缩 css 和 js 文件造成的。但是是如何造成的，并不清楚。于是我就做了下研究，想查明为什么造成这种调用字体路径的不同。

查看服务器页面中调用的css 路径：/Content/basicCSS?v=68kc9-tXFbzdxgI98GIy_1pZTFRgNY9I60WxOBqeEmo1

然后打开这个路径所在的css 文件，查找 fontawesome 字体引用的代码：

@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?
查到了这个。这一分析，还真找到了错误的原因。font-awesome 组件的相关 css 代码，在服务器上被打包到虚拟目录/Content/basicCSS 下。而这个文件中引用的有关字体代码是../fonts/fontawesome-webfont.eot ，向上了一个目录。那正好是根目录下的fonts文件夹下。这就解释通为什么服务器上引用字体文件是在根目录下的 fonts 文件夹下了。知道了错误原因，于是我把/scripts/plugins/font-awesome4.5.0/fonts 下的字体文件复制到根目录下 fonts 文件夹下一份，上传到服务器上。经过测试，相关的图片能正确显示了。问题解决

标签：fonts,字体库,字体,fontawesome,webfont,font,css,图标
来源： https://www.cnblogs.com/dekevin/p/10375385.html