一、首先把 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)打开,图标就可以正常显示,可能原因是,本地服务器没有这些字体文件