Icomoon插入图标方法②
下载图标方法见方法①
新建代码文件,在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>
文件
效果