字体图标使用

Posted 2020-08-19 分享是一种快乐

最近写了一个使用bootstrap的项目，用到了字体图标，下面简要介绍一下在项目中使用字体图标的一些经验

1.在使用bootstrap时，body默认的字体是西文字体，所以需要手动设置字体

body {
font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
}

2.在声明自己的字体图标时，使用css3的@font-face设置 

@font-face {

　　font-family: "share";

　　src: url(‘../font/MiFie-Web-Font.eot‘)  format(‘embedded-opentype‘),url(‘../font/MiFie-Web-Font.svg‘) format(‘svg‘),url(‘../font/MiFie-Web-Font.ttf‘) format(‘truetype‘),url(‘../font/MiFie-Web-Font.woff‘) format(‘woff‘);

}

3.由于这个项目里使用图标字体的标签(例如i)的类名都是以icon- 开头，给所以使用这种类名的标签加上字体

[class^= "icon-"],

[class *= " icon-"] {

　　font-family: "share";

　　font-style: normal;

}

4.在需要使用图标的标签里加上before伪类进行使用

<i class="icon-mobilephone"></i>

.icon-mobilphone::before {

　　content: "\e908";

　　font-size: 13px;

}

附:

1.可以使用iconMoon上传svg图定义自己的图标字体 设置字符编码(如&#xf058)也可以设置图标所对应的字母(如A);      网址:icomoon.io

2.图标字体的优势:1.轻量性 2.灵活性 3.兼容性