之前一直以為用background引入的圖標無法染色（非字體圖標），現在才知道有黑科技可以用，就是利用drop-shadow。
代碼示例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .face1{ display: inline-block; width: 40px; height: 40px; background-image: url(face.svg); } .face2{ display: inline-block; width: 40px; height: 40px; overflow: hidden; } .face2 i{ display: inline-block; width: 40px; height: 40px; background-image: url(face.svg); transform: translateX(-100%); -webkit-filter:drop-shadow(40px 0 #F88E1D); } .face3{ display: inline-block; width: 40px; height: 40px; overflow: hidden; background-image: url(face.svg); } .face3:after{ content: ''; display: inline-block; width: 40px; height: 40px; transform: translateX(-100%); -webkit-filter:drop-shadow(40px 0 #F88E1D); background: inherit; } </style> </head> <body> <h3>原始圖標：</h3> <span class="face1"></span> <h3>染色圖標(兩層標簽)：</h3> <span class="face2"><i></i></span> <h3>染色圖標(after)：</h3> <span class="face3"></span> </body> </html>
效果
注意問題
1.使用after作為第二層標簽的這種方式，可能會出現最后效果有些雜色。
這是因為after背景繼承了父標簽，然后以它為drop-shadow，這時就出現兩個圖標了。問題就出在父標簽的背景圖（第三個圖標）被疊在下面，圖標如果有比較細的線條，疊在下面的圖標會像糊在下面。
所以最好不要用這種方式，老老實實寫兩層標簽。
2.在低版本的chrome里，需染色圖標如果是在有滾動條的區域內，會染色不了。
這時需要在滾動區域加屬性：
position: relative;
z-index:1;
總結
如果有需要染色圖標，做成字體圖標好些。這種drop-shadow的方式，最后再選。