关于CSS3 @font-face

使用字体图标方法一：

1.在https://v3.bootcss.com/components/网站选取合适的图标，直接复制类，放在自己的标签中即可

2.这个网页中的字体标签有限可以在下面网页中查找：

1》http://f2er.club/

2》

3》比如，我们选择了icommoon，点击右上角icomoon app

4》进入如下页面，找到自己喜欢的图案，点击generate font，生成字体标签。

5》 点击下载。

6，解压后放到项目的fonts里，然后就是在css中引入标签，代码如下：

@font-face {
    font-family: 'YourWebFontName';
    src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
    src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
    url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}

例如：

htmlz中：

<span class="icon-phone"></span>

<span class="icon-tel"></span>

css中：

@font-face {
    font-family: 'lk';
    src: url('../fonts/icomoon/fonts/icomoon.eot') format('embedded-opentype'),
    url('../fonts/icomoon/fonts/icomoon.woff') format('woff'),
    url('../fonts/icomoon/fonts/icomoon.ttf')  format('truetype'),
    url('../fonts/icomoon/fonts/icomoon.svg') format('svg');
}
[class^="icon-"],[class*="icon-"]{
    font-family: 'lk';
    font-style: normal;
}
.icon-phone::before{
   content: '\e957';
    font-size: 13px;
}
.icon-tel::before{
    content: '\e942';
    font-size: 13px;
}

注:其中的content可以在下载的压缩包中的.html文件中查看