当前位置:   article > 正文

Vue ,Element-ui中el-menu使用阿里图标_el-menu添加logo

el-menu添加logo

转载:https://blog.csdn.net/bobobocai/article/details/87707289

一、登录阿里巴巴矢量图标库 https://www.iconfont.cn/
在这里插入图片描述
二、选择需要的图标,添加至项目
在这里插入图片描述
在这里插入图片描述
三、进入我的项目,下载图标至本地
在这里插入图片描述
在下载之前编辑项目在这里插入图片描述
在这里插入图片描述

四、点击下载到本地 会下载一个download.zip

五、在src/assets 下 新建一个 icon文件夹,把解压后的文件放到icon文件夹

六、打开iconfont.css

添加 代码

  1. [class^="icon-user"], [class*=" icon-user"] {
  2. font-family:"iconfont" !important;
  3. font-size: 18px;
  4. font-style:normal;
  5. -webkit-font-smoothing: antialiased;
  6. -moz-osx-font-smoothing: grayscale;
  7. }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

注意:第二个class处前面有个空格

七、然后在main.js 中引入iconfont.css

八、使用

 <span class='freight_icon-mimasuo'></span>
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/113188
推荐阅读
相关标签
  

闽ICP备14008679号