如何在线轻松实现iconfont字体图标的使用？

本文共计1382个文字，预计阅读时间需要6分钟。

目录+使用准备+三种使用方式介绍+Unicode引用+Font-Class引用+Symbol引用+在线使用+点击生成代码+完整使用代码+Vue项目（本地）使用iconfont字体图标+Vue中手动封装iconfont组件（三种引用方式的封装）

目录

• 使用准备
• 三种使用方式介绍
• unicode引用
• font-class引用
• symbol引用
• 在线使用
• 点击生成代码
• 完整使用代码

vue项目(本地)使用iconfont字体图标

vue中手动封装iconfont组件（三种引用方式的封装）

使用准备

进入 阿里巴巴矢量图标库 ，登陆以后，搜索需要的图标，然后点击添加入库

进入“我的图标库”（右上角购物车），点击添加至项目

点击 + 图标创建一个新项目，然后把新图标加入到新项目中。