iconfont在项目中的使用

iconfront使用方式

本文主要描述iconfront如何在vue中使用

---

前言

字体图标是为解决图片放大或缩小后失真、整站图片过多请求和整站体积过多的问题。字体图标可以和图片改变透明度、旋转等，其本质是文字所以也可以改变颜色、添加阴影等效果而且一般来说比图片体积会更小并被绝大部分浏览器支持。例如常见的购物车图标，按钮图标等都可以采用字体图标来做，用font-size来控制大小，用color来控制颜色等。

一、使用步骤

1.进入阿里图标

要使用iconfront，首先你要登录阿里图标，以下是链接地址：
阿里图标：https://www.iconfont.cn

2.注册并登录阿里用户

3.选择图标

选择图标并加入购物车

4.添加项目

单击购物车图标，选择添加项目并命名项目

5.下载至本地

将项目下载至本地。其选择font class

6.解压文件

将刚刚下载至本地的文件解压，并放至项目中

7.导入文件

在index中导入iconfront.css文件，其文件位置在你导入的包中

8.使用iconfont

在相应使用位置插入标签，其class=“iconfont”为必选项，而其余class为使用什么图标便引入什么图标。

总结

iconfont在前端中使用越来越广泛，得益于它能像字体一般改变大小，颜色，加载十分迅速，提高了用户体验。

作者:黎亮亮
日期：2020/10/17 21：27
本文原创，希望各位支持点赞！