使用CSS更改圖標的顏色

　　我們經常在很多網站上見到更改網站的主題時，圖標的顏色也改變了，我們總是覺的這一項功能非常偉大，因為我們知道使用CSS是無法完成更改圖片的顏色的。那么，網站上隨心所欲的圖標顏色是采用N多個圖片不斷的切換來實現的嗎?

 

　　答案當然不是，我也曾想過無數次到底網站上的圖標是如何更改顏色的，我甚至曾想到它是使用顏色彩筆動態創建的矢量圖形，當然結果你也知道了，肯定不是這樣的，下面我來告訴大家事實的真像。

 

　　我們在網站看到的圖片可以像文字一樣隨意改變顏色的圖形，其實它本身就是一種文字，只不過這些文字並不是我們平常所使用的各種字體的文字，它是一種圖標文字，是設計師們使用“專用字符編輯程序”而創建的圖標字體。這樣我們就可以使用CSS更改所謂的圖片（即圖標文字）的顏色。

 

<div class="smail">
            <em class="status">我很高興 </em>
            <em class="status unHappy"> 哥很憂郁</em>
        </div>

 

.status:BEFORE {
    color: red;
    content: "☺";
    font-size: 22px;
    font-style: normal;
    left: 0;
    position: absolute;
    top: 8px;
    text-align: center;
    width: 21px;
}

.status {
    display: block;
    font-size: 11px;
    line-height: 12px;
    margin-bottom: 20px;
    padding: 2px 0 2px 26px;
    position: relative;
}

.unHappy:before {
    content: "☹";
    color: blue;
    font-size: 22px;
}

 

 

        

　　結束語：很多復雜的事情，其實本是很簡單的事，只是我們想的復雜了，所以就把事情處理的復雜了。