字体图标固用代码

在一些大型的项目中，类似“微金所”等，在首页通常需要有一些属于自己的字体图标，这时需要在项目中创建fonts文件夹，放入几个必须的文件，如下图：

想要下载fonts文件，点击字体图标文件fonts下载哦，取货码：uh3l。

 

将上面下载的fonts文件夹放在项目目录中，想要用到这个还需要在相应的样式文件中写入以下代码：

/*1 通过@font-face定义自己的字体*/
@font-face {
    /*2 申明自己的字体名称 */
    font-family: 'wjs';
    /*3 引入字体文件(约束某一段字符代表什么图案)*/
    src:
        url(../fonts/MiFie-Web-Font.eot) format('embedded-opentype'),
        url(../fonts/MiFie-Web-Font.ttf) format('truetype'),
        url(../fonts/MiFie-Web-Font.woff) format('woff'),
        url(../fonts/MiFie-Web-Font.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}
/*4 怎么使用维护性更好*/
.wjs_icon{
    font-family: wjs;
}
/*给每个图标专门设置一个类content是代表图标的字符，这个由UI组提前设定好的*/
.wjs_icon_phone::before{
    content: '\e908';
}