用CSS画简单图标

用CSS画了三个图标，叉号，排行符号，搜索符号。先上效果图啦啦啦。

附上CodePen链接，点我点我

思路

用叉号举例哈。叉号可以看作两个互相垂直的矩形框。矩形框可以用width和height和backgrond-color来表现，也可以用height和border-left和border-right和border-color来表现。我们用::before和::after伪类来分别当一个矩形框，然后进行旋转即可得到叉号。

我们用添加类的形式插入叉号，当我们需要插入叉号时，我们额外添加一个标记，并添加类icon-cross。

第一步，设置图标尺寸。

.icon-cross{
  width: 20px;
  height: 20px;
  position: absolute;  /*方便相对于父元素进行定位*/
}

第二步，设置伪类，画叉号。

.icon-cross::before,
.icon-cross::after{
  content: "";
  position: absolute;  /*方便进行定位*/
  height: 16px;
  width: 1.5px;
  top: 2px;
  right: 9px;  /*设置top和right使图像在20*20框中居中*/
}
.icon-cross::before{
  transform: rotate(45deg);  /*进行旋转*/
}
.icon-cross::after{
  transform: rotate(-45deg);
}

为了让矩形框有一定圆角好看点，可在伪类样式中追加border-radius: 1px;。另外，为了使20*20的框能在父元素中垂直居中，我们给.icon-cross追加样式top: 50%; margin-top: -10px;。上边距为父元素高度的50%，然后再上移10px，这样就垂直居中了哦。（10px为自身高度一半。如果图标高度是18px，那么就是上移9px。）

要设置在父元素中的水平位置，可设置left或right。

为了能根据父元素进行定位，父元素务必position:relative||absolute;。

还要注意一点，由于我们没有设置background-color，所以这时候是还啥都看不到。我喜欢在插入图标时，再另外设置背景颜色，这样可以在不同地方反复插入这个图标，并分别设置不同的颜色。当然，你也可以设置一个颜色作为默认值。

具体的插入图标示例见开头的CodePen吧。

补充：我个人比较喜欢用border来当色块啦，这样可以设置伪元素border-color: inherit;，然后直接设置类的边框颜色就行了。如果是用width和height来当色块的话，就只能单独设置伪类的background-color，觉得麻烦。但是用border来做的话，IE11和Edge在网页缩放时有时候会在中间多一条缝..很丑陋..

代码

附上CSS图标库代码。（现在只有三个图标哈哈）

/*----图标大小为20px*20px，已经设置好在父元素中垂直居中，
只需另外设置left或者right来调整水平位置----*/

/*----通用设置----*/
[class|=icon]{  /*所有类名以“icon-”开头的*/
  width: 20px;
  height: 20px;
  top: 50%;  /*上边距为父元素50%*/
  margin-top: -10px;  /*再往上移动自身高度一半，就垂直居中了*/
  position: absolute;  /*有些图标高度不是20px，那么margin-top要单独设置*/
}

[class|=icon]::before,  /*所有类名以“icon-”开头的伪元素*/
[class|=icon]::after{
  content: "";
  position: absolute;
  height: 0;
  width: 0;
}


/*---------叉号---------*/
.icon-cross::before,
.icon-cross::after{
  height: 16px;
  width: 1.5px;
  top: 2px;
  right: 9px; /*设置right和top使叉号居中*/
  border-radius: 1px;
}
.icon-cross::before{
  transform: rotate(45deg);
}
.icon-cross::after{
  transform: rotate(-45deg);
}

/*----------排行榜----------*/
.icon-ranklist,
.icon-ranklist::before,
.icon-ranklist::after{
  width: 4px;
  border-radius: 1px;
}
.icon-ranklist::before,
.icon-ranklist::after{
  bottom: 0;
  background: inherit;
}
.icon-ranklist{
  height: 18px;
  margin-top: -9px;
  margin-left: 8px;
  margin-right: 8px;  /*这样排行榜图标宽度可以当作20px*/
}
.icon-ranklist::before{
  height: 12px;
  left: -6px;
}
.icon-ranklist::after{
  height: 10px;
  right: -6px;
}

/*----------搜索图标----------*/
.icon-search::before{
  height: 12px;
  width: 12px;
  border-radius: 12px;
  border: 2px solid;
  top: 1px;
  left: 1px;
  border-color: inherit;
}
.icon-search::after{
  height: 7px;
  border-left: 1.5px solid;
  border-right: 1.5px solid;
  border-radius: 1.5px;
  right: 3px;
  bottom: 0px;
  transform: rotate(-45deg);
  border-color: inherit;
}

存在的问题

最近才发现的，网页缩放后，图标会有些变形，比如叉号会一根线长点另一根线短点，只有在100%大小时才能完全是你想要的效果，哭...