在網站中添加各種icon已經成為了網頁設計中不可或缺的部分。而使用CSS來添加非圖片icon也是一種方便且實用的方法。

在CSS3中，可以使用偽元素來添加icon和元素之間的符號，如箭頭、加號、減號等等。CSS偽元素是HTML元素的一個虛擬部分，可以使用CSS樣式指定其內容、顏色、位置和大小等屬性。

以下代碼是添加一個箭頭icon的示例：

.arrow::before{
content: " ";
border-style: solid;
border-width: 6px 6px 0 6px;
border-color: #000 transparent transparent transparent;
display: block;
height: 0;
width: 0;
}

首先，我們給需要添加icon的元素添加一個自定義的class名稱“arrow”。接著使用偽元素“::before”來添加箭頭，指定其屬性為：

• content:指定添加的內容，這里使用空格來表示。
• border-style:指定邊框樣式。
• border-width:指定邊框寬度，這里表示上、左、右3條邊為6px，下邊為0。
• border-color:指定邊框顏色，這里表示上邊為黑色，其他方向為透明。
• display:指定該偽元素的顯示方式為塊級元素。
• height:指定元素高度為0，由邊框定義內容區域的大小。
• width:指定元素寬度為0。

這樣，我們就成功地添加了一個箭頭icon。我們還可以使用其他的CSS樣式屬性來控制其顏色、大小和位置等，以實現更多樣化的icon設計。