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

最新推荐文章于 2023-06-15 16:31:21 发布

原创最新推荐文章于 2023-06-15 16:31:21 发布 · 6.5k 阅读

0 ·

CC 4.0 BY-SA版权

后台开发同时被 3 个专栏收录

5 篇文章

订阅专栏

异常处理

2 篇文章

订阅专栏

大前端

2 篇文章

订阅专栏

本文解决Hui-iconfont字符图标在动态加载时显示异常的问题，通过在jsp页面上添加字体库的全路径，确保图标能正确显示，避免路径加载失败。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

然后解决问题。
在这里插入图片描述

分析一下。应该是在原来的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里加全路径，发现解决依旧显示异常。原因我还没找到，如果你找到原因，请告知我，多谢。