1.element-ui里面的图标数量少的可怜,下面介绍如何使第三方图标

阿里巴巴的图标网站http://www.iconfont.cn/

2.首先搜索自己需要的图标,添加到购物车,然后点击购物车将图标添加到项目,如果没有项目需要创建项目。

vue element-ui使用第三方图标库

3.选择第二个选项vue element-ui使用第三方图标库

4.点击更多操作进行编辑,注意前缀的设置,后面的命名不能和element里面的发生冲突

vue element-ui使用第三方图标库

5.设置完成之后保存代码到本地,打开文件夹

vue element-ui使用第三方图标库

对里面的代码进行修改。

6.为每一个图标设置相同的样式

vue element-ui使用第三方图标库

7.将代码文件拷到项目的目录下,并在main.js中引入图标文件

vue element-ui使用第三方图标库

8.图标的用法和element里面的一样

vue element-ui使用第三方图标库

9.最终的效果

vue element-ui使用第三方图标库

 

相关文章:

  • 2021-11-29
  • 2021-08-20
  • 2022-12-23
  • 2021-09-03
  • 2021-12-29
  • 2021-11-29
  • 2021-10-08
  • 2021-04-06
猜你喜欢
  • 2021-05-17
  • 2021-06-18
  • 2022-12-23
  • 2021-12-25
  • 2022-12-23
  • 2021-12-22
  • 2022-12-23
相关资源
相似解决方案