在Web开发中，使用CSS带有图标的列表是一种常见的设计方式。这种列表可以让页面更加有吸引力和可读性，同时也可以提高用户的交互体验。本文将介绍如何使用CSS实现带有图标的列表。

<ul class="icon-list">
<li><i class="fa fa-check"></i> 列表项1</li>
<li><i class="fa fa-pencil"></i> 列表项2</li>
<li><i class="fa fa-clock-o"></i> 列表项3</li>
<li><i class="fa fa-heart"></i> 列表项4</li>
</ul>

首先，我们需要创建一个无序列表（ul）并为其添加一个类名"icon-list"。在每个列表项（li）中，我们将添加一个图标元素（i），并为其添加一个表示图标的类名（例如fa fa-check表示一个打勾的图标）。

现在我们来编写CSS样式：

.icon-list li {
list-style: none;
padding-left: 30px;
position: relative;
margin-bottom: 10px;
}
.icon-list li:before {
font-family: FontAwesome;
content: "\f0d9";
color: #ccc;
font-size: 16px;
position: absolute;
left: 0;
top: 1px;
}
.icon-list li:nth-child(2):before {
content: "\f040";
}
.icon-list li:nth-child(3):before {
content: "\f017";
}
.icon-list li:nth-child(4):before {
content: "\f004";
}

首先，我们将列表的默认样式去掉，然后设置左边距为30像素（根据需要进行调整），并将其设置为相对定位。接下来，使用:before伪元素在每个列表项前添加图标元素，并使用content属性设置图标编码。在设置图标颜色和大小后，使用position属性将其设置为绝对定位，然后将左边距设置为0像素（在图标前放置空间）。最后，我们可以通过:nth-child选择器，分别为不同位置的列表项添加不同的图标。

现在我们就可以在页面中看到带有图标的列表了。