使用CSS更改图标的颜色

　　我们经常在很多网站上见到更改网站的主题时，图标的颜色也改变了，我们总是觉的这一项功能非常伟大，因为我们知道使用CSS是无法完成更改图片的颜色的。那么，网站上随心所欲的图标颜色是采用N多个图片不断的切换来实现的吗?

 

　　答案当然不是，我也曾想过无数次到底网站上的图标是如何更改颜色的，我甚至曾想到它是使用颜色彩笔动态创建的矢量图形，当然结果你也知道了，肯定不是这样的，下面我来告诉大家事实的真像。

 

　　我们在网站看到的图片可以像文字一样随意改变颜色的图形，其实它本身就是一种文字，只不过这些文字并不是我们平常所使用的各种字体的文字，它是一种图标文字，是设计师们使用“专用字符编辑程序”而创建的图标字体。这样我们就可以使用CSS更改所谓的图片（即图标文字）的颜色。


 

 
  1. <div class="smail">  
  2.             <em class="status">我很高兴 </em>   
  3.             <em class="status unHappy"> 哥很忧郁</em>  
  4.         </div>  

 

 
  1. .status:BEFORE {  
  2.     color: red;  
  3.     content: "☺";  
  4.     font-size: 22px;  
  5.     font-style: normal;  
  6.     left: 0;  
  7.     position: absolute;  
  8.     top: 8px;  
  9.     text-align: center;  
  10.     width: 21px;  
  11. }  
  12.   
  13. .status {  
  14.     display: block;  
  15.     font-size: 11px;  
  16.     line-height: 12px;  
  17.     margin-bottom: 20px;  
  18.     padding: 2px 0 2px 26px;  
  19.     position: relative;  
  20. }  
  21.   
  22. .unHappy:before {  
  23.     content: "☹";  
  24.     color: blue;  
  25.     font-size: 22px;  
  26. }  



 

 

        

　　结束语：很多复杂的事情，其实本是很简单的事，只是我们想的复杂了，所以就把事情处理的复杂了。

posted @ 2013-10-30 16:36  web8  阅读(7024)  评论(0)  编辑  收藏  举报