css图标两行字布局

在页面布局中，有时候会需要使用到图标，而使用CSS图标是一种非常常用且方便的方法。而在使用CSS图标时，排版的布局也是需要特别注意的。下面，我们将介绍一种使用CSS图标的两行字布局。

HTML代码：
<div class="icon-layout">
  <i class="icon"></i>
  <div class="text">
    <p class="title">这里是标题</p>
    <p class="description">这里是描述</p>
  </div>
</div>

CSS代码：
.icon-layout {
  display: flex;
  align-items: center;
}
.icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  background-color: #ccc;
  border-radius: 50%;
}
.text {
  flex: 1;
  overflow: hidden;
}
.title {
  font-size: 18px;
  margin-bottom: 5px;
}
.description {
  font-size: 14px;
  color: #999;
}

在上面的代码中，我们使用了一个div元素作为整个布局的容器，并使用了flex布局。在这个div元素中，我们将图标和文字部分分别放在了一个i元素和一个div元素中，并为div元素设置了一个类名为text。

而在CSS代码中，我们对每个元素进行了样式设置。对于图标部分，我们设置了宽度、高度、margin等样式。而对于文字部分，我们使用了flex属性将其占据了整个剩余空间，并对标题和描述分别进行了字号、颜色等样式设置。

使用这种方式进行布局，可以使得图标和文字部分更好的结合在一起，并且布局也更加紧凑，美观。