CSS图标与文字垂直排列是一种非常流行的设计技巧，可以使页面更加美观且易于阅读。下面我们将介绍如何实现这一技巧。

.icon-text{
display: flex;
align-items: center;
}
.icon-text i{
margin-right: 5px;
}

首先，我们可以使用flex布局来实现图标与文字的垂直排列。通过设置display属性为flex，并使用align-items属性将元素垂直居中，我们可以轻松地将图标与文字垂直对齐。

接下来，我们需要使用margin属性来设置图标与文字之间的距离。通常情况下，我们需要在图标的右侧添加一些空白，以便让文字更好地呈现。可以使用i标签来定义我们的图标，并在CSS中为其添加margin-right属性。

最终实现的效果可以是这样的：

<div class="icon-text">
<i class="fa fa-envelope"></i>
<span>联系我们</span>
</div>

在HTML代码中，我们可以使用一个div元素来包含我们的图标和文字。在这个例子中，我们使用FontAwesome图标库来呈现我们的邮件图标。在CSS中，我们定义了.icon-text类来应用上面的样式。

总结一下，我们可以使用flex布局和margin属性来轻松地实现图标与文字的垂直排列。这种设计技巧使页面看起来更加整洁和易于阅读。希望这篇文章能够帮助你在未来的项目中应用这一技巧。