项目要求是自定义字体图标，使用easyui框架结构，众所周知easyui强功能弱样式，字体图标其实就是一张图片。要达到切换图标颜色的效果，要么就是有两套图，使用js控制。但是我这个人比较懒，不喜欢做复杂的事情。“投机取巧”也造就了我痛苦的过程。
之前项目使用的框架是bootstrap,恰好和easyui反过来了强样式弱功能，样式用得我是春风得意，现在要换框架，也有自定义图标，心想着换汤不换药嘛，就用老办法使用bootstrap那一套，测试了一下没问题，心里还窃喜自己是个天才呢。后来才发现这个方法谷歌老大认，火狐兄弟不认哪，它就只是显示一个小小小小点，还提什么切换颜色简直天方夜谭。我滴个亲娘，差点泪奔。
好嘛我认了，用人家的东西肯定得按人家的规矩来，所以我挨个把字体图片按照16*16的标准做好了，也都显示了，现在就轮到图标颜色的切换上了，这可把我头都抓破了。首先在博客上看到张大神的思路，使用CSS3的新技能过滤器 “filter” ，哎呀妈这是个好东西，有了它还用什么js哟。我就按照这个思路来开始做。但是不完全一致，这里只是使用了主要的两个属性，因为我们项目中有多个地方都是使用的linkbutton,且大小不一，布局也是使用的vue进行渲染，牵一发而动全身，所以无法区别对待。
.l-btn-icon-left .l-btn-icon{
-webkit-filter: drop-shadow(30px 0);
filter: drop-shadow(30px 0);
left: -28px;
}
用了这个属性过后问题又来了，可以达到投影来切换的效果，火狐兄弟没问题，谷歌这回不开心了，但是原因不是不支持这个属性，而是需要投影两次（我组长发明的思路！！），谷歌才认。也就是鼠标覆盖前投影一次，鼠标覆盖后再次投影
一次，以此来达到想要的效果。（我自定义的图标颜色是黑色的，需要图标最原始的状态是白色，鼠标覆盖时显示黑色）。完整的css如下：
重中之重的样式，否则谷歌老铁不认的，它只认识你鼠标没有覆盖前投影的状态，只要你覆盖过，图标颜色就会回到最开始的状态，显然不合逻辑。
.l-btn:hover, .l-btn-left:hover {
background: #fff;
color: #000;
border-radius: 0;
.l-btn-icon-left .l-btn-icon{
-webkit-filter: drop-shadow(30px 0);
filter: drop-shadow(30px 0); //投影的距离是按照项目中图标位置来酌情调整的。
left: -28px;
}
}
.l-btn-icon-left .l-btn-icon{
-webkit-filter: drop-shadow(30px 0);
filter: drop-shadow(30px 0);
left: -28px;
}
终于结束了我的厄运，只不过这个想法确实很新颖，省事。