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>&#xe900;</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>&#xe900;</p>
</body>
</html>

文件
这里写图片描述
效果

这里写图片描述

Icomoon插入图标方法②

Icomoon插入图标方法②

猜你喜欢