首先我们需要找一个图标库,本次演示采用的是heroicon
 
● 之后我们根据需求搜索与之想匹配的图标并复制svg代码
 
● 之后将我们的代码复制到我们想要放置图标的地方
 
 
● 当然我们需要使用CSS来修饰一下
.features-icon {
  stroke: #087f5b;
  width: 32px;
  height: 32px;
  margin-bottom: 16px;
}

其他的同理即可
 
接着我们为我们的产品地方添加图标
 
和上面一样,这里我们只展示我们的CSS写法
.chair-icon {
  stroke: #087f5b;
  width: 24px;
  height: 24px;
}
最后的效果是这样的
 
其他的复制粘贴上一个就行了
 这里教大家一个简单的复制粘贴多个内容的方式
按住ALT键盘可以多选,然后复制
 
同样按住ALT,可以多选一些光标,然后进行复制
 
点击复制之后就是这样的效果,就全部复制过来了,比较方便
 
最终的页面如下图,是不是比不加图标好看了很多,也是的用户阅读体验提高了很多?



















