卡卡網

我之前介紹過44個CSS3制作的形狀圖形(shape)，和130個純CSS3圖標(CSS icons)，本文將給大家介紹512個CSS圖標形狀(icon shape)，無需用到第三方文件，遷移使用起來相當方便。

demodownload

使用介紹

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

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

如需要顯示一個搜索圖標，那么HTML代碼就是：

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

其對應的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; 
}

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

本文介紹的CSS圖標一共多達512個，值得收藏。

相關文章推薦

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

標簽: css  css3  shape  形狀圖形  CSS圖標  css-icon