elementUI-添加自定义图标

elementui的小图标有限,跟UI给的不一样,这个时候咋办呢?百度走起。。。。参考了两篇博主分享的 自定义elementui中的图标建立图标库,这里主要用到第一种

实际中:
在这里插入图片描述
elementUI导航栏
在这里插入图片描述

具体代码:

//自定义图标名el-icon-my-
.el-icon-my-statistic{
  background: url("./imgs/statistics_icon_nor.png") center no-repeat;
}

//content中是中文的Unicode编码; font-size:图标大小; visibility: hidden;来隐藏文字
.el-icon-my-statistic:before{
  content: "\8d3a";
  font-size: 14px;
  visibility: hidden;
}

补充

汉字转换Unicode编码:

直接打开控制台: 汉字.charCodeAt().toString(16); 然后回车;


至于三角形的图标,我直接把箭头的 unicode 值改成了 三角形的 Unicode 值。
/* 上三角\e78f , 下三角\e790*/
aside ul#myAside .el-icon-arrow-down:before {
  content: "\e78f" !important;
}
  • 3
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
el-button 是一个常用的 Vue 组件库 ElementUI 中的按钮组件,它有一个属性 icon,可以用来设置按钮的图标。但是 ElementUI 提供的图标有限,当用户需要使用自定义图标时,该怎么做呢? 要实现在 el-button 中使用自定义图标,可以通过两种方式: 第一种,使用 ElementUI 提供的 el-icon 自定义图标功能。在 ElementUI 中,可以通过给 el-icon 添加自定义图标 class 来实现自定义图标,这些 class 是通过类似于字体文件的 svg 文件方式提供的。步骤如下: 1.前往 ElementUI 官方网站下载需要的 svg 文件,或通过 icons.duckduckgo.com 等网站下载。 2.将下载的 svg 文件放在项目的 assets 文件夹下。 3.在 main.js 中引入 SVG icon。 ``` import '@/assets/icons'; ``` 4.在 el-button 中使用自定义的 el-icon 图标 class。 ``` <el-button icon="my-icon-class"></el-button> ``` 第二种,使用 ElementUI 提供的 slot 自定义按钮内容。通过使用 el-button 的 slot 功能,即插槽功能,可以实现在按钮中插入任何自定义内容,包括图片、图标、文字等。步骤如下: 1.在 el-button 中添加插槽。 ``` <el-button> <i class="my-icon-class"></i> </el-button> ``` 2.添加外部样式表引入自定义图标。 ``` <style> .my-icon-class { /* 自定义样式 */ } </style> ``` 通过以上两种方式,即可以实现在 el-button 中使用自定义图标。需要提醒的是,如果选择使用 el-icon 自定义图标功能,则需要使用 ElementUI 官方提供的 svg 文件,或自行制作 svg 文件,并按照 ElementUI 的规范进行命名和使用;如果选择使用 slot 自定义按钮内容,则需要自行制作图标或引入已经制作好的图标,同时需要保证自定义图标样式与 ElementUI 的样式保持一致,以达到视觉效果的统一。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值