网上有各种用CSS3画图标,画漫画的代码,实在是有点吊!如果能为自己的网站也绘制一套CSS3图标,那么就省去了用小图片的力气。虽然说各大浏览器对CSS3的支持性还不尽相同,但是大势所趋,写写更健康。
首先,我们要做到使用简单,简单到给元素加个类就能使用图标,然后我们还要支持可定制,比如颜色,大小。看下面的代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS3 ICONS</title>
</head>
<body>
<div class="container">
<a class="css3-icon css3-icon-search" href="#"></a>
</div>
</body>
</html>
我们只要给a标签加上两个类就可以让它变成一个图标。之所以加两个,是因为类css3-icon实现的图标的基本样式,而css3-icon-search则实现了具体的search图标样式:
/*global icon style*/
.css3-icon{
position:relative;
display:block;
/*custom the icon size*/
width:100px;height:100px;fo