嘿，这个问题我太熟了！用位图背景图确实没法直接通过CSS改颜色，毕竟图片本身是固定颜色的。换成Font Awesome的矢量图标就彻底解决这个麻烦了——它就像文字一样，color属性直接就能控制颜色，不管多少客户的hover颜色需求都能轻松应对，完全不用做几百个图标~

具体步骤来啦： #

1. 替换按钮HTML结构
   把你那个用背景图的按钮，改成和另外两个按钮一样的Font Awesome图标结构，用Font Awesome自带的标尺图标（对应类名fa fa-ruler，如果你用的是Font Awesome 5+版本，就改成fas fa-ruler）：

   <button type="button" class="custbtn"><em class="fa fa-minus" aria-hidden="true"></em></button>
   <button type="button" class="custbtn"><em class="fa fa-plus" aria-hidden="true"></em></button>
   <button class="custbtn" id="tlruler" value="off">
     <em class="fa fa-ruler" aria-hidden="true"></em>
   </button>
   

2. 删除冗余的CSS
   把原来针对#tlruler的背景图相关样式删掉，因为现在用的是Font Awesome图标，不需要这些了：

   /* 删掉这段冗余代码 */
   #tlruler {
     background-image: url("../images/ruler.png");
     background-size: 20px 20px;
     background-repeat: no-repeat;
     background-position: center;
   }
   

3. 享受自动变色的快乐
   现在这个标尺图标会自动继承.custbtn的color属性，hover的时候也会跟着变成.custbtn:hover里设置的#d9b310，和另外两个按钮的行为完全一致！以后不管哪个客户需要不同的hover颜色，只要修改.custbtn:hover里的color值就行，再也不用纠结做图标了~

补充说明 #

Font Awesome的图标本质是矢量字体，所以除了颜色，大小也能通过font-size轻松调整，比位图图标灵活太多啦。如果你不确定图标类名对不对，可以查一下你用的Font Awesome版本的图标列表，确保类名匹配就行。

内容的提问来源于stack exchange，提问作者DevWizard