之前一直以為用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的方式，最后再選。?
本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=1c1jbaa&title=CSS染色圖標（圖片）
編寫規則)
