前言
这篇文章主要为大家呈现的是动态改变Iconfont,这个icon一般用于导航菜单的标题前面,当我们有要可以动态修改更换标题图标时,不用再手动去修改代码了,是可以直接放在数据中修改的,非常的方便,而且很容易操作,尽管不是自己团队中的人,替换的话也很简单,下面我来为大家展示
一、先登录Iconfont-阿里巴巴
登录的时候有几个选项,咱要不是阿里员工的话就直接微博扫码登录就可以了
二、创建项目
1、用鼠标触摸到导航菜单的图标管理,会展开一个二级菜单,其中有一个菜单叫我的项目
2、点击进去,有一个新建项目
3、点击,里面的内容看着填就行
4、点击新建,就可以了
三、在项目里添加自己的图标
点击上传图标至项目
SVG的图片不用咱们操心的,让你的UI兄弟或UI姐妹搞定就可以了
然后点击下载到本地
四、在Vue项目中进行操作
1、把下载的文件解压,然后复制这五个文件
2、在Vue项目中的src文件中的assets文件中创建一个iconfont文件,并把复制的5个文件放在里面
3、在main.js中引入iconfont的css文件
4,、用的时候
<i class="iconfont iconshuxue"></i>
// 必填项 icon在图标库里的名字
五、备注
在替换的时候,你要从新下载一下字体图标,然后在把那5个文件从新替换一下
结语
非常实用的一个东西,希望可以对你有所帮助