Hui-iconfont字符图标不显示或显示异常。

时间：2024-04-09 08:04:22

Hui-iconfont字符图标不显示或显示异常。

近期在做项目时发现Hui-iconfont字符图标，感觉很方便，并且占用空间小，加载快等有点。就决定采用了。
可是在加载图标时通过后台动态加载时显示总是异常。如下图Hui-iconfont字符图标不显示或显示异常。
这个问题困扰了我挺久的。最后终于找到解决办法
解决办法：在你的jsp页面加上字体库的全路径。
如下：

<style type="text/css">
 @font-face {font-family: "Hui-iconfont";
  src: url('${pageContext.request.contextPath }/lib/Hui-iconfont/1.0.8/iconfont.eot'); /* IE9*/
  src: url('${pageContext.request.contextPath }/lib/Hui-iconfont/1.0.8/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('${pageContext.request.contextPath }/lib/Hui-iconfont/1.0.8/iconfont.woff') format('woff'), /* chrome、firefox */
  url('${pageContext.request.contextPath }/lib/Hui-iconfont/1.0.8/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('${pageContext.request.contextPath }/lib/Hui-iconfont/1.0.8/iconfont.svg#Hui-iconfont') format('svg'); /* iOS 4.1- */
} 
</style>

然后解决问题。
Hui-iconfont字符图标不显示或显示异常。

分析一下。应该是在原来的iconfont.css里的


    @font-face {font-family: "Hui-iconfont";
  src: url('iconfont.eot'); /* IE9*/
  src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff') format('woff'), /* chrome、firefox */
  url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('iconfont.svg#Hui-iconfont') format('svg'); /* iOS 4.1- */
}

路径加载失败导致的。所以要写全路径即可。
备注：我试着在iconfont.css里加全路径，发现解决依旧显示异常。原因我还没找到，如果你找到原因，请告知我，多谢。

相关文章