在網頁設計中，經常會用到文字前的小圖標來提高頁面的美觀性。這些小圖標通常是通過CSS編寫實現的，下面就讓我們來看看如何使用CSS來實現文字前的小圖標。

首先我們需要在HTML中設置一個可以放置圖標的容器，比如下面這樣：

<div class="icon-text">
<i class="icon iconfont icon-edit"></i>
<span>編輯</span>
</div>

這里我們使用了一個div容器，里面包含了一個i標簽和一個span標簽。其中i標簽用來放置圖標，span標簽用來放置文字。

接下來我們需要編寫CSS代碼來實現圖標的顯示和排版。首先我們需要定義圖標的樣式，比如下面這樣：

.icon {
display: inline-block;
font-family: "iconfont";
font-size: 16px;
font-style: normal;
font-weight: normal;
line-height: 1;
}

在上面的代碼中，我們定義了圖標的顯示方式為inline-block，這是可以將多個圖標排列在同一行的關鍵。同時我們也設置了圖標的字體、大小、樣式和行高等屬性。

然后我們再定義容器中文字的樣式，比如下面這樣：

.icon-text span {
display: inline-block;
margin-left: 5px;
vertical-align: top;
}

在上面的代碼中，我們將文字的顯示方式也設為了inline-block，并設置了文字和圖標之間的間距和對齊方式。

最后，我們將圖標和文字放置在同一個容器中，并設置它們的位置關系，比如下面這樣：

.icon-text i {
margin-right: 5px;
vertical-align: top;
}

在上面的代碼中，我們設置了圖標和文字之間的間距和對齊方式，從而使它們顯示在同一行上。

通過上面的步驟，我們就可以實現文字前的小圖標效果了。如果需要使用不同的圖標，只需要更換i標簽中的樣式名稱即可。