iconfont引用方法

前端小白进阶路

页面对于小图标的需求 除了精灵图片可以满足后也可以引用阿里巴巴的矢量图标库

而且引用图标库感觉效率更高 而且可以让设计师偷懒哈哈

下面开始介绍教程，其实网上已经很多 但是感觉有一些细节并没有解释清楚

本文将详细介绍ICONFONT的UNICODE和SYMBOL引用

1. 在http://www.iconfont.cn/ 搜索自己想要的图标，添加到购物车

2.将选好的icon添加到自己的项目中

现在iconfont有三种引用方式 unicode、symbol、fontclass

点击你要选择的引用方式下载本地

3.当你下载到电脑后，打开的文件夹是这样的，其中三个html文件就是分别对应三种引用方式的教程

不过有些细节没有详细说到，所以本文介绍unicode和symbol两种引用方式

1.首先介绍unicode

PS：unicode引用不支持多色图标，unicode引用类似于字体的引用，所以可以改变图标的颜色

1.1 在style.css文件中引入

注意：这里只是教程中的例子路径，要修改成自己相对应的路径（其实就和引入img或者是.css文件一样）

1.2自定义图标的样式

这里的font-family的值与@font-face里的font-family是一样的

font-style:normal 是让图标垂直

其他的样式可以自定义 类似于定义字体

font-size定义大小

color可以改变图标颜色 （symbol引用好像不可以改变 只可以改变背景色）

1.3

编码要换成自己选择图标的编码

在iconfont网站上可以看到

symbol引用

2.1在html文件引用iconfont.js文件

2.2定义样式 和unico定义类名一样

3.挑选类名 在html文件书写下面的代码块

注意svg的类名必须和.css定义的类名一致

href=“#icon-xxx”是图标的名字

同样，在iconfont网站可以找到

UNICODE引用虽然不支持多色 但可以改变图标的颜色

SYMBOL引用可以引用多色的图标但是不能改变字体颜色哦