欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

字体图标的使用

程序员文章站 2024-02-16 10:28:34
...
  1. 字体图标的优点:兼容性好,不会失真、可以设置大小和颜色。

  2. 字体图标的使用
    (1)准备好字体图标的库文件:
    字体图标的使用
    (2)在css中自定义字体图标

 /*1.通过@font-face定义自己的字体*/
@font-face {
    /*2.申明自己的字体名称*/
    font-family: 'mm';
    /*3.引入字体文件(约束某一段字符代码什么图案)*/
    src:
    url(../fonts/MiFie-Web-Font.svg) format('svg'),
    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');
}

(3)定义类样式

.mm_icon{
    font-family: wjs;
}
/*通过伪类向内容添加字体图标*/
.mm_icon_phone::before{
    content: "\e908";
}

(4)在html中引入

/*在html中加入字体图标的类样式即可*/
/*mm_icon表示引入字体图标名称*/
/*mm_icon_phone表示该字体中特定的字体图标,语义性强,可维护性高*/
 <span class="mm_icon mm_icon_phone"></span>

3.追加新图标到原来库里面
如果工作中,原来的字体图标不够用了,我们需要添加新的字体图标,但是原来的不能删除,继续使用,此时我们需要这样做

https://icomoon.io/

把压缩包里面的selection.json 从新上传,然后,选中自己想要新的图标,从新下载压缩包,替换原来文件即可。
字体图标的使用