@font-face使用

1.下载需要的图标文件，一般需要4个字体文件，提供一个网址：https://icomoon.io/#icons（网上还有很多）。

下载到字体文件后会得到一个压缩包，里面有需要的东西,可以查看里面的style.css获得详细用法。下面是我的方法：
1.html实体+font
首先得定义

@font-face{    font-family:myfont;//这个可以自定义    src:url("font/icomoon.eot");//url为字体地址，这行代码兼容ie9    src: url(fonts/icomoon.eot?#iefix) format("embedded-opentype")        ,url(fonts/icomoon.woff) format("woff")        ,url(fonts/icomoon.tff) format("truetype")        ,url(fonts/icomoon.svg) format("svg");    font-weight: normal;    font-style: normal;}

声明之后就可以使用字体了，但还的获得字体图标对应的实体。类似于这样的字符串，下载字体时会告诉。
2.使用css样式设置。使用:before或after伪类实现
设置字体图标容器，例如：

<i class="icon"><i/><style>    .icon{        font-family:"myfont";    }    .icon:before{        content:"/e950";    }</style>

这样就可以是用了。

3.利用字体库提供的css类，已我上面提到的网站
<link rel="stylesheet "href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

首先导入提供的css文件，其托管cdn上,如下使用其提供的类设置图标，具体类名网站上有，其做法类似于第二种。

<span class="lnr lnr-mustache" style="font-size: 40px;"></span>

w3Schools 提供的浏览器支持表