使用icomoon字体图标库无法显示的问题

一、首先把 fonts文件夹放入我们 根目录下  

 

二、 html标签内里面添加结构

 

 <span></span>

 

三、 在样式里面声明字体： 告诉别人我们自己定义的字体(一定注意字体文件路径的问题)

复制代码
@font-face {
     font-family: 'icomoon';
     src:  url('fonts/icomoon.eot?7kkyc2');
     src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
       url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
       url('fonts/icomoon.woff?7kkyc2') format('woff'),
       url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
     font-weight: normal;
     font-style: normal;
   }
复制代码

四、 给盒子使用字体 

span {
   font-family: "icomoon";
   }

 

按照上面的步骤正确使用icomoon字体图标库发现只能显示下图

经过长时间查找原因发现，如果我直接打开html文件，而不使用本地服务器（localhost）打开，图标就可以正常显示，可能原因是，本地服务器没有这些字体文件

posted @ 2020-05-26 10:56  ccv2  阅读(2996)  评论(1)  编辑  收藏  举报