欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

使用css更动图标的颜色

更新时间: 2014-01-05 00:53:48 责任编辑: Author_N1

 

使用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;
}


 

        

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

上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 00:53:48
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/1121/
本文WWW.DOC100.NET DOC100.NET版权所有。