自定义element-ui图标

一、登录iconfont

1、自行上传svg,并命名好的svg,选择去除颜色并提交


image.png

image.png

2、搜索合适的图标,添加到购物车,点击购物车,添加到项目中


image.png

image.png

二、在更多操作中修改FontClass/Symbol前缀,方便统一管理

image.png

image.png

三、下载文件

image.png

image.png

四、在项目src -> assets 目录下,新建一个icon 文件夹,把下载下来的项目里面的文件拷贝到icon文件夹里,只需下图几个文件,其他的不需要

image.png

五、在iconfont.css文件中添加如下代码:

/* 引入图标 */
[class^="icon-product"],
[class*=" icon-product"]
{
  font-family: "iconfont" !important;
  font-size: 18px !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

在main.js里把css引进来,全局引入

import "./assets/icon/iconfont.css"

六、打开在阿里icon的项目,复制你想要的图标代码

image.png
<el-button icon="icon-product" size="small"></el-button>
<!-- 或者 -->
<i class="icon-product" style="margin-left:30px;"></i>

七、显示

image.png
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第七周 过去太久了我都想不起来在这周我干了些什么,又做了些什么。我很无奈我都忘掉了。我只记得好吧我什么都没有记得,...
    e6439601d21e阅读 279评论 2 0
  • (这个轮播代码不是我自己所写,是偶然游览一个简友的主页看到的,今天刚看了事件,决定来逐行分析一下这个代码)首先,移...
    小红依阅读 344评论 0 6
  • 在陇中的一个小县城,累了一天,晚上想吃面,被同行者带到一家牛肉拉面小店,进门报饭,老板问宽的细的?选了细的,之后才...
    来世海神阅读 438评论 5 2
  • 春光之下,万物生辉,我却想谈论一下死亡。经历过亲人的离世,对死亡不免拥有特别的怀想。 在一个温暖的白天或者黑夜,人...
    今日之我阅读 726评论 2 2
  • 我问儿子你这次没考好的原因是什么?他说你和我爸经常吵架。我的心一惊,委屈的泪水夺眶而出。 我这一年好累啊!可是并没...
    一棵树的倒影阅读 833评论 3 18

友情链接更多精彩内容