卡卡网

我之前介绍过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