如何实现在线使用iconfont字体图标的长尾词功能？

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

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

目录

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

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

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

使用准备

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

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

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