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 文件夹下一份,上传到服务器上。经过测试,相关的图片能正确显示了。问题解决

上一篇:第4天:JS入门-给div设置宽高背景色


下一篇:css实现文本缩略显示