纯css图标

/*对号*/
.gou{
    width: 9px;
    height: 18px;
    border-right:2px solid #f39800;
    border-bottom:2px solid #f39800;
    transform: rotate(40deg);
}

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

/*上三角*/
.triangle{
    position: relative;
}
.triangle::after {
    content: '';
    width: 0;
    height: 0;
    border: 0.5rem solid transparent;
    border-bottom: 0.5rem solid #000;
    position: absolute;
    top: -1rem;
    left: 48%;
    transform: translateX(-50%);
    z-index: 100;
}

/*大于号*/
.greater{
    position: relative;
}
.greater:after{
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    border-left: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: translate(0,-50%) rotate(-135deg);
}

很多图标也可以通过content字符实现，例如 通过css实现对勾（√）和叉号（×）, 能用content字符实现的图标有，各种箭头，大于小于号，对号(样式有问题)，叉号，各种三角，星号，

雪花，象棋，扑克牌，希腊字母，天空，植物，手型，铅笔，笔型，十字等，可首选content字符来实现图标。

 

出处：简单的使用css画勾、叉、三角、大于号