Icomoon插入图标方法②

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样式优先级规则,使该条样式属性声明具有最高优先级,也就是相当于写在最下面。*/

点开下载包
Icomoon插入图标方法②_第1张图片

看图标的代码
Icomoon插入图标方法②_第2张图片
代码的使用,在前面加&#x

<p>p>

完整代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <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>

文件
这里写图片描述
效果

这里写图片描述

你可能感兴趣的:(Icomoon插入图标方法②)