下载图标方法见方法① 新建代码文件，在css里加入以下代码
/*依然注意路径问题*/ @font-face{ font-family: "imooc-icon"; src: url("fonts/icomoon.eot"); /* IE9 兼容模式 */ src: url("fonts/icomoon.eot?#iefix") format("embedded-opentype") ,url("fonts/icomoon.woff") format("woff") ,url("fonts/icomoon.ttf") format("truetype") ,url("fonts/icomoon.svg") format("svg"); font-weight: normal; font-style: normal; } p{ font-family: 'imooc-icon' !important; } /*在什么标签里插入图标，就要声明一下font-family；font-family和@font-face里的一样上面用p做例子 !important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。语法格式{ cssRule !important }，即写在定义的最后面，例如：box{color:red !important;} 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级，也就是相当于写在最下面。*/点开下载包
看图标的代码 代码的使用，在前面加&#x
<p></p>完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> @font-face{ font-family: "imooc-icon"; src: url("fonts/icomoon.eot"); /* IE9 兼容模式 */ src: url("fonts/icomoon.eot?#iefix") format("embedded-opentype") ,url("fonts/icomoon.woff") format("woff") ,url("fonts/icomoon.ttf") format("truetype") ,url("fonts/icomoon.svg") format("svg"); font-weight: normal; font-style: normal; } p{ font-family: 'imooc-icon' !important; } </style> </head> <body> <p></p> </body> </html>文件 效果
