建产品网站怎么做白城市住房建设局网站

首先我们需要找一个图标库，本次演示采用的是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，可以多选一些光标，然后进行复制

点击复制之后就是这样的效果，就全部复制过来了，比较方便

最终的页面如下图，是不是比不加图标好看了很多，也是的用户阅读体验提高了很多？