字体图标的使用
程序员文章站
2024-02-16 10:28:34
...
-
字体图标的优点:兼容性好,不会失真、可以设置大小和颜色。
-
字体图标的使用
(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.追加新图标到原来库里面
如果工作中,原来的字体图标不够用了,我们需要添加新的字体图标,但是原来的不能删除,继续使用,此时我们需要这样做
把压缩包里面的selection.json 从新上传,然后,选中自己想要新的图标,从新下载压缩包,替换原来文件即可。