0
点赞
收藏
分享

微信扫一扫

怎么在已经添加好的iconfont,在原有基础上再次添加其他图标

在前端项目开发中,我们通常会使用阿里的图标字体库(iconfont),来丰富图标。

有些时候,在接手或者使用他人的图标字体后,既需要原来的图标,又想加入自己喜欢的图标怎么办呢?

以下以我的项目做个示例供大家参考:

  1. 官方有三种引入方式Unicode、Font class、Symbol(参考iconfont帮助),具体以项目怎么引入的方式为准;

怎么在已经添加好的iconfont,在原有基础上再次添加其他图标_css

以上可以确认我的项目使用的是Font class引入图标的,确定好后我们就可以进行后续操作

  1. 进入iconfont(iconfont)挑选你需要的图标,然后加入到你的iconfont项目中(以下为本项目引入user图标为例)

怎么在已经添加好的iconfont,在原有基础上再次添加其他图标_css_02

选中你需要的图标,点击购物车图标

怎么在已经添加好的iconfont,在原有基础上再次添加其他图标_ico_03

点击右上角购物车,选择添加至项目,如果第一次没有项目的,点击新建进行新建项目(这里我已经新建好了,就不做演示了)

怎么在已经添加好的iconfont,在原有基础上再次添加其他图标_ico_04

怎么在已经添加好的iconfont,在原有基础上再次添加其他图标_图标字体_05

在资源管理中找到 我的项目

怎么在已经添加好的iconfont,在原有基础上再次添加其他图标_图标字体_06怎么在已经添加好的iconfont,在原有基础上再次添加其他图标_css_07

  1. 选择适用你项目的引入方式,引入到项目,这里我选择Font class

怎么在已经添加好的iconfont,在原有基础上再次添加其他图标_css_08

点击红框内的链接,就会弹出相应代码,复制整个代码到你项目的iconfont.scss/iconfont.css中,如果与你之前的样式重复了就删除就好了(woff2、woff、ttf字体文件可以下载到本地,直接引入也行)

怎么在已经添加好的iconfont,在原有基础上再次添加其他图标_css_09

  1. 前端vue项目中使用新引入的User图标,就大功告成啦

怎么在已经添加好的iconfont,在原有基础上再次添加其他图标_图标字体_10

怎么在已经添加好的iconfont,在原有基础上再次添加其他图标_ico_11


以上就是怎么在旧的 iconfont 中加入新图标的方法啦!

个人经验,仅供参考,如有错误欢迎指正


举报

相关推荐

0 条评论