element自定义icon；

最新推荐文章于 2024-01-30 15:26:15 发布

前端小云儿

最新推荐文章于 2024-01-30 15:26:15 发布

阅读量243

点赞数

分类专栏：前端静态页面以及逻辑文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/jieweiwujie/article/details/134436083

版权

前端静态页面以及逻辑专栏收录该内容

117 篇文章 16 订阅 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

<template>
  <div>
    <h3>element自定义icon；</h3>
    <h3>
      html使用，和正常的element的 图标 i 标签使用一样，使用设置的类名class即可：
    </h3>
    <i class="el-icon-my-statistic"></i>
  </div>
</template>
<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },
};
</script>

<style scoped lang="scss">
//自定义图标名1
.el-icon-my-statistic {
  background: url("../assets/logo.png") center no-repeat; // 需要引入你的图标路径
  background-size: contain;

  display: inline-block;
  width: 15px !important;
  height: 15px !important;
  margin-left: 6px;
}
//content中是中文的Unicode编码 可以写也可以不写； font-size:图标大小； visibility: hidden;来隐藏文字
.el-icon-my-statistic:before {
  content: "\21we";
  display: inline-block;
  width: 15px !important;
  height: 15px !important;
  margin-left: 6px;
  font-size: 15px;
  visibility: hidden;
}
</style>