在一些網站設計中，為了美觀和易于識別，我們常常需要在文本框的前面添加一些符號和圖片，這些符號和圖片就稱為文本框前面圖標。而使用CSS實現文本框前面圖標是一種非常方便和實用的方法。

樣式代碼：
input {
padding-left: 30px;
background-image: url('icon.png');
background-repeat: no-repeat;
background-position: left center;
}

上述代碼中，我們使用了padding-left屬性來保留圖標的位置，即文本框的左側空出一定的距離放置圖標。然后，我們設置了一張背景圖片作為圖標，用background-image屬性來引用；接著，使用了background-repeat屬性來控制圖標的重復方式，我們這里設置為no-repeat，即不重復；最后，使用了background-position屬性來確定圖標的位置，我們這里設置為左側居中。

如果我們想要在輸入框的右側添加圖標，只需要把上面代碼中的left改為right即可：

input {
padding-right: 30px;
background-image: url('icon.png');
background-repeat: no-repeat;
background-position: right center;
}

同樣的道理，我們設置padding-right屬性來保留圖標右邊的距離，background-position屬性將圖標向右對齊。這樣設計的文本輸入框會更加美觀和易于使用。