KindEditor插件改用自定义图标

关键代码：

kindeditor目录/themes/default/default.css

.ke-toolbar-icon-url {
 background-image: url(default.png);
}

也就是说插件所用图片默认是

kindeditor目录/themes/default/default.png

好比超级连接按钮

.ke-icon-link {
 background-position: 0px -624px;
 width: 16px;
 height: 16px;
}

取消超级连接
.ke-icon-unlink {
 background-position: 0px -640px;
 width: 16px;
 height: 16px;
}

有一个background-position:的属性，说明了图片所在位置。

自定义的插件也受到默认图标的影响。怎样把本身的小图标加进来呢？

首先把

default.css文件里的

.ke-toolbar-icon-url {
 background-image: url(default.png);
}

注释掉

/*

.ke-toolbar-icon-url {
 background-image: url(default.png);
}

*/

而后再把全部的.ke-icon-  的css里面加上 background-image: url(default.png);
如：超连接的图标

.ke-icon-link {

 background-image: url(default.png);
 background-position: 0px -624px;
 width: 16px;
 height: 16px;
}

记住要全部的都加上 background-image: url(default.png); 不然影响经常使用的图标。
而后找到default.css里面要使用自定义样式的插件名，将原样式位置删除，引用的图片改成本身想换的图片

如：

.ke-icon-media {
   background-image: url(media.jpg);
   width: 16px;
   height: 16px;
}

就显示本身的图标了。下面是我作的效果