自定义icon图标 element ui

最新推荐文章于 2025-05-31 19:46:15 发布

原创最新推荐文章于 2025-05-31 19:46:15 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #vue

javascript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用背景图片定义自定义图标的样式方法，并通过实际代码展示了如何在HTML中实现这一效果。具体包括定义CSS样式、引入必要的库文件及在页面上展示图标的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义样式

 <style>
        .el-icon-my-export {
           /* 图片路径 */
            background: url('../assets/icon/shenhe.png') center no-repeat;
            background-size: cover;
        }

        .el-icon-my-export:before {
            content: "\66ff";
            font-size: 16px;
            visibility: hidden;
        }


        .el-icon-my-export {
            font-size: 16px;
        }

        .el-icon-my-export:before {
            content: "\e641";
        }
 </style>

引用

  <i class="el-icon-my-export"></i>
 <el-button icon="el-icon-my-export" circle></el-button>

完整代码

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title></title>
    <style>
        .el-icon-my-export {
            /* 图片路径 */
            background: url('../assets/icon/shenhe.png') center no-repeat;
            background-size: cover;
        }

        .el-icon-my-export:before {
            content: "\66ff";
            font-size: 16px;
            visibility: hidden;
        }


        .el-icon-my-export {
            font-size: 16px;
        }

        .el-icon-my-export:before {
            content: "\e641";
        }
    </style>

</head>

<body>
    <div id="app">
        <i class="el-icon-my-export"></i>
        <el-button icon="el-icon-my-export" circle></el-button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
            }
        })
    </script>
</body>
</html>