在網(wǎng)站SEO優(yōu)化中，小圖標(biāo)處理方式主要有三種：
①整合到一張圖作為背景圖，通過CSS樣式background-position顯示出來；
②用字體圖標(biāo)font-icon，幾乎所有你想要的圖標(biāo)直接拿來用；
③用CSS3直接畫，但只能畫一些簡單的幾何圖形，對瀏覽器有一定要求。
這幾種方式都不影響優(yōu)化，兼容性最好的當(dāng)然是第一種，有些IE6有些還不支持圖片png格式；
最洋氣的是第二種，如果不想外引用字體，可以直接寫到公共CSS樣式表內(nèi)，兼容性較好（本人測試百度瀏覽器不支持）；
第三種對瀏覽器有一定要求，下面介紹用CSS畫幾個圖形，移動端優(yōu)化中用得比較多的：返回箭頭，菜單，搜索放大鏡。效果請看本博客，用手機瀏覽或把PC瀏覽器寬度控制在780px內(nèi)。
完整代碼如下：
<!doctype html>
<html>
<head>
<title>CSS3返回箭頭/菜單/搜索放大鏡 - 秀站網(wǎng)秀站網(wǎng)</title>
<style>
.clear:after{clear:both}
i{display:block}
.back{
float:left;
width:20px;
height:20px;
border-top:4px solid #555;
border-left:4px solid #555;
-webkit-transform:rotate(-45deg);
transform:rorate(-45deg);
}
.menu{
float:right;
width:30px;
height:5px;
border-top:5px solid #555;
border-bottom:5px solid #555;
background-color:#555;
padding:5px 0;
background-clip:content-box;
}
.search{
position: relative;
}
.search:before{
content: ' ';
position: absolute;
width: 15px;
height: 15px;
border: 3px solid #666;
border-radius: 30px;
box-shadow: inset 1px 1px 10px rgba(0,0,0,.3); }
.search:after{
content: ' ';
position: absolute;
width: 18px;
height: 5px;
background: #666;
border-radius: 5px 0 0 5px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
.search:before{
top: 0;
left: 30px;
}
.search:after{
top:15px;
left: 30px;
}
</style>
</head>
<body>
<p class="top clear">
<i class="back"></i>
<i class="menu"></i>
<i class="search"></i>
</p>
</body>
</html>
