[分享]css中搜索图标怎么做

在CSS的编写过程中，搜索图标是需要用到的一种元素。本文将为大家介绍CSS中搜索图标怎么做。

 .search-icon {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
  }

  .search-icon:before {
    content: "";
    display: block;
    position: absolute;
    top: 6px;
    left: 0;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-right-color: #000;
    transform: rotate(-45deg);
  }

  .search-icon:after {
    content: "";
    display: block;
    position: absolute;
    top: 9px;
    left: 3px;
    width: 10px;
    height: 2px;
    background-color: #000;
    transform: rotate(45deg);
  } 

以上代码是实现搜索图标的CSS样式代码。首先，在search-icon类中定义图标元素的基本属性。通过:before和:after实现搜索图标的2个组成部分，即尖头和平行线。其中:before用于绘制尖头，通过设置透明边框和颜色边框的方式实现一个45度角的三角形，然后通过transform属性旋转-45度，使其变成一个尖头。:after用于绘制平行线部分，通过设置宽度、高度、颜色等属性实现平行线样式，然后通过transform属性旋转45度，使其和尖头对称。

使用时只需要在HTML中加入以下代码即可：

 <span class="search-icon"></span> 

将搜索图标的样式类加入到HTML中的标签上即可实现搜索图标在页面中的呈现。