废话不多说了,直接上步骤
第一步打开www.iconfont.cn/
在里面搜索的想要的图标,例如:“公司”;点击你看中的加入到购物车
如果这边没有自己的项目的话,可以新建一个属于自己的项目,项目新建成功后,把购物车的图标添加到项目里
或者公司ui小姐姐自己设计了图标可以让他们导出svg格式的图标给你
在这里就可以上传成功了。图二里面门店的icon就是自己上传的
现在准备工作做的差不多了,接下来第二步了
第二步选择font class 下载到本地
将下载好的文件放入项目中去,首先在src下的assets项目新建一个文件夹icons,名字可以自己定义,建好后将下载的文件放进去 然后到main.js里面引入import './assets/icons/iconfont.css'
注意:这里如果有修改icon使用前缀,需要在iconfont.css里面加上,[class^="el-icon-cc"],[class*=" el-icon-cc"]
(非必要步骤)为了避免项目中遇到重复的名字可以修改icon的前缀,可以在我的项目主页里面点击项目设置进行修改
例如
第三步
在router文件夹下面配置icon就可以直接使用了
如果在页面里面也可以直接用
<i class="el-icon-cc-xingzhuang"></i>
关于更新
当项目如果有更新图标,iconfont也会有相应的提示,只需要再把更新的文档替换到iconfont.css文件中,就不需要重复下载了。如图