在Web開發中，我們常常需要使用小圖標來裝飾網頁，比如箭頭、星號、勾號等等。傳統方式是使用圖片來實現，但是這樣會增加網頁的加載時間，同時也不方便修改和維護?，F在，CSS3的類圖標（class icon）成為了實現小圖標的一種新方式，它可以使我們更方便地管理和使用圖標。 CSS3類圖標的實現方式是使用偽元素（:before/:after）和字體圖標（font icon）相結合。字體圖標是將圖標以字符的方式嵌入字體文件中，通過CSS3的@font-face規則引用，這樣就可以通過字體屬性來控制圖標大小、顏色等。偽元素可以在元素前或后插入一個虛擬的元素，對這個元素設置樣式，從而達到渲染圖標的目的。 下面的例子就是用CSS3類圖標顯示一個箭頭：

.arrow {
position: relative;
display: inline-block;
width: 10px;
height: 10px;
}
.arrow:before {
position: absolute;
top: 0;
left: 0;
content: " ";
width: 0;
height: 0;
border-top: 5px solid black;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}

這個例子中，我們定義了一個類.arrow，用來設置容器的樣式。在:before偽元素中，我們使用border屬性來定義三角形的形狀，注意是使用border-top來設置三角形的底邊，而(border-left、border-right)則用來將三角形的尖端收束在容器中心。% 符號充當分隔線，右邊表示透明。 通過這種方式，我們可以很方便地定義各種各樣的圖標，并且非常適合用于按鈕、導航等場景。同時，使用字體圖標的方法也使得我們可以在不同的設備上使用同一組圖標，更方便地維護和升級。