css三个图标并排一列

在网页设计中，常常需要使用图标。不过当需要将多个图标排列在一列时，该如何实现呢？今天我们来介绍一下如何使用CSS将三个图标并排排列。

.icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  background-image: url('图标1路径');
  background-size: contain;
  background-repeat: no-repeat;
}

.icon2 {
  background-image: url('图标2路径');
}

.icon3 {
  background-image: url('图标3路径');
} 

首先，我们需要给每个图标都设置一个class类名，这里我们将其命名为“.icon”。 接着，我们给每个图标都设置了宽度和高度，并通过background-image将图标背景设置为目标图片的路径。同时，我们设置了background-size为contain，使得图标能够适应背景框的大小。为了让图标之间有一定的间隔，我们还通过margin-right设置了每个图标的右边距。 对于第二个和第三个图标，我们分别加上了“icon2”和“icon3”的类名，并将其对应的背景图标通过background-image进行设置。这样，我们便能够实现三个图标并排排列的效果。

以上就是使用CSS将三个图标并排一列的方法。当需要排列更多的图标时，只需将样式复制并稍作修改即可。希望以上介绍对大家有所帮助。