字体图标的使用（总结）

字体图标在实际开发中会比较常用，接下来总结一下它的基本使用方式，供以后查阅。

一、登录iconfont官网，选择合适的图标，添加到购物车

1. 在浏览器输入iconfont官网www.iconfont.cn/，并选择一种方式登录
2. 图标可以通过搜索获取，也可以在图标库中选择:

找到合适的图标后，要添加到购物车,即添加入库:

二、选好字体后，建议将图标添加至项目(可选操作)

开发项目时，随着项目功能的增多，需要的字体可能会越来越多，因此会往字体中添加新字体，久而久之，就容易忘记该字体中都有哪些字体了。而将图标添加至项目后，就可以实时记录项目中有哪些字体，以及每个字体对应的编码是什么，这样有利于管理字体图标。操作步骤如下:

1. 点击头部导航的右侧购物车按钮，打开侧边栏:

2. 点击“添加至项目”：

3. 点击“加入项目"右侧的“加号”，创建一个项目名并确认，就可以把图标添加至项目：

4. 在“资源管理"、“我的项目"中，可以查看项目下使用了哪些字体，以及字体对应的编码:

三、下载字体图标

1. 方式1：点击头部导航右侧购物车，通过弹窗中的“下载素材"直接下载:

2. 方式2：在“我的项目”中，点击“下载至本地”:

四、解压下载后的文件，将其中的字体文件，复制到项目中

将文件夹中的字体文件，比如iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff、iconfont.woff2复制到项目中:

五、打开demo_index.html文件，将关键代码复制到项目中(代码)

1. 将@font-face代码复制到自己项目的css文件中，同时要对应修改好src的路径:

2. 将".iconfont"的代码也复制到项目中:

六、使用字体图标

以上就是字体图标使用的总结，希望帮助到大家