easyui之自定义字体图标（鼠标覆盖时切换颜色）

       项目要求是自定义字体图标，使用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;
}

终于结束了我的厄运，只不过这个想法确实很新颖，省事。