CSS中，我們可以使用文字前位置小圖標（text-before:content）將小圖標放置于文本前面，方便頁面設計過程中的美化。那么這個小圖標是如何實現的呢？

.icon:before {
content: "圖標";
font-family: "iconfont";
}

這里，我們可以使用content屬性來設置前綴內容，也可以使用font-family屬性來加載圖標字體等。如果你有自己的圖標字體庫，就可以直接調用。

那么這個小圖標到底可以實現哪些效果呢？我們來看一下以下例子：

.icon:before {
content: "\f007";
font-family: "FontAwesome";
}

這里，我們使用了FontAwesome字體庫并設置了content為圖標對應的Unicode編碼，就可以實現一個的小圖標效果。

還可以實現一個放大鏡的搜索小圖標：

.icon:before {
content: "\f002";
font-family: "FontAwesome";
}

即可實現一個效果。

注意，在使用這個功能的時候，需要注意小圖標的大小和字體等問題，不然會出現一些不必要的問題。希望大家可以善用這個小技巧，讓自己的頁面設計更加完美。