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

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

以下代碼是添加一個箭頭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:指定添加的內(nèi)容，這里使用空格來表示。
• border-style:指定邊框樣式。
• border-width:指定邊框?qū)挾龋@里表示上、左、右3條邊為6px，下邊為0。
• border-color:指定邊框顏色，這里表示上邊為黑色，其他方向為透明。
• display:指定該偽元素的顯示方式為塊級元素。
• height:指定元素高度為0，由邊框定義內(nèi)容區(qū)域的大小。
• width:指定元素寬度為0。

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