字体图标的引入

定义

字体图标简单的说，就是一种特殊的字体，通过这种字体，显示给用户的就像一个个图片一样。

优势

• 字体图标最大的好处，在于它不会变形和加载速度快。
• 字体图标可以像文字一样，随意通过CSS来控制它的大小和颜色，对于建网站来说，非常方便。

方式一

阿里巴巴矢量库网站https://www.iconfont.cn/

• 搜索需要的字体图标，加入购物车
• 购物车中下载代码
• 将下载的压缩包解压到项目文件夹的font文件中
• 打开里面的网页链接，按照网页中的提示将@font-face及定义的字体样式复制到自己的css文件中，修改url中对应的地址，（只需添加相应的文件前缀）
• 给需要添加自己样式的元素添加自己设置好的类名，书写网页对应的编码

---

方式二

免费字体图片网站https://icomoon.io/app/#/select

• 可以在将UI设计好的字体图标文件导入该网站中，左上角 +来添加文件，只需导入svg格式的文件
• 也可以直接找自己想要的图标
• 点击网页底部第三项Generate Font 可获取对应的html及css代码
• 需要自定义@font-face,如下

/* 导入自定义字体图标 */
@font-face {
    font-family: 'icon-font';
    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');
}
//定义字体图标样式
[class^="icon-"],
[class*=" icon-"] {
    font-family: icon-font;
    font-style: normal;
}

补充

^=选择器

[attribute^=value] 选择器匹配属性值以指定值开头的每个元素。
例子：
[class^=“icon-”]选择 class 属性值以 “icon-” 的元素

#####=选择器
该选择器等号后面须加一空格
[attribute*=value] 选择器匹配属性值包含指定值的每个元素。
例子：
[class=" icon-"]选择 class 属性值以 " icon-" 的元素