EasyUI 自定义组件 icon 图标

前言

EasyUI 自带的 icon 就 二十多个(1.3.3版本)

这里写图片描述

明显是不足的,而且不能很好适应主题,如此一来,自定义 icon 就显得十分重要了

步骤

1、准备好图片

这里推荐一个挺好的图标库

图标下载

这里我从弄了如下一个

这里写图片描述

2、把图标传到项目路径下

(不一定要传到 EasyUI 的 themes/icons 的路径下,到时候在 .css 样式引用的时候知道在哪儿就行了)

这里写图片描述

3、在 .css 文件中声明

(不一定要在 EasyUI 里边的 icon.css 中,到时候记得引入即可)

这里写图片描述

.icon-myOK{
    background:url('icons/myOK.png') no-repeat left center;
}

4、导入 .css 文件即可使用

(当然基本的 jquery.js、easyui.js 文件要导入)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>ITAEM团队</title>
        <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css" />
        <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css" />
        <script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>
        <script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
        <!--中文化-->
        <script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
    </head>

    <body>
        <button class="easyui-linkbutton" iconCls="icon-myOK" ng-click="pay()">___ok</button>
    </body>

</html>

5、效果

这里写图片描述

猜你喜欢

转载自blog.csdn.net/larger5/article/details/79825691