美文网首页
element自定义图标mark

element自定义图标mark

作者: 色即是猫 | 来源:发表于2022-05-20 17:06 被阅读0次

    前提
    elementui图标库图标较少
    当你想用elementui的控件而不想用它的图标时,就可以使用自定义的方式来实现

    实现
    el-icon-my-export为我自定义的图标命名

    <el-button class="default" icon="el-icon-my-export">导出</el-button>

    //使用图片来替换
    //before属性中的content文本是用来占位的,必须有
    //可以设置字体大小来确定大小
    //使用visibility: hidden;来隐藏文字
    //还可以用SVG图
    .el-icon-my-export{
    background: url(/officeHouse/resources/images/export.png) center no-repeat;
    background-size: cover;
    }
    .el-icon-my-export:before{
    content: "替";
    font-size: 16px;
    visibility: hidden;
    }

    //如果直接使用字体图片
    //直接在before属性设置对应的content就行
    .el-icon-my-export{
    font-size: 16px;
    }
    .el-icon-my-export:before{
    content: "e611";
    }
    content里面使用汉字大小会比较正常,但是汉字有时候会出现乱码,可以使用Unicode编码

    //编码后的的替为 u66ff
    //书写到css里面的时候需要去掉u
    .el-icon-my-export:before{
    content: "66ff";
    font-size: 16px;
    visibility: hidden;
    }
    文章摘自:https://segmentfault.com/a/1190000025176437

    相关文章

      网友评论

          本文标题:element自定义图标mark

          本文链接:https://www.haomeiwen.com/subject/dbdrsrtx.html