卡卡網(wǎng)

我之前介紹過(guò)44個(gè)CSS3制作的形狀圖形(shape)，和130個(gè)純CSS3圖標(biāo)(CSS icons)，本文將給大家介紹512個(gè)CSS圖標(biāo)形狀(icon shape)，無(wú)需用到第三方文件，遷移使用起來(lái)相當(dāng)方便。

demodownload

使用介紹

首先引用CSS文件，該文件在下載壓縮包里。

<link rel="stylesheet" href="style.css">

如需要顯示一個(gè)搜索圖標(biāo)，那么HTML代碼就是：

<div class="search icon"></div>

其對(duì)應(yīng)的CSS代碼是這樣的（可在css文件里找到）：

.search.icon {
  margin-top: 2px;
  margin-left: 3px;
  width: 12px;
  height: 12px;
  border: solid 1px #333333;
  border-radius: 100%;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg); 
}
.search.icon:before {
  top: 12px;
  left: 5px;
  height: 6px;
  width: 1px;
  background-color: #333333; 
}

通過(guò)修改CSS代碼里的高(height)、寬(width)、位置(top、left)等數(shù)值，可以更改圖標(biāo)的大小。

本文介紹的CSS圖標(biāo)一共多達(dá)512個(gè)，值得收藏。

相關(guān)文章推薦

• 130個(gè)純CSS3圖標(biāo)(CSS icons)【#下載#收藏】
• 用純CSS實(shí)現(xiàn)各種方向的箭頭
• 【實(shí)例】CSS3畫一個(gè)半圓的方法
• 純CSS實(shí)現(xiàn)圓角樣式的4種寫法，比CSS3兼容性更好
• css3畫實(shí)心圓和圓角的方法

標(biāo)簽: css  css3  shape  形狀圖形  CSS圖標(biāo)  css-icon