字符圖標是一種類似于矢量圖像的圖標，通常是基于 Unicode 字符集中的字符創(chuàng)建的。這種圖標也被稱為字形圖標，因為它們實際上是字形的字形（glyphs）。

CSS 中提供了一些屬性和方法可以很容易地在網(wǎng)站中使用字形圖標。其中最流行的是使用::before和::after偽元素在 HTML 頁面中插入字形圖標。

.icon::before {
content: "\f007"; /* Unicode 字符編碼 */
font-family: FontAwesome; /* 字體名稱 */
font-weight: normal; /* 字體粗細 */
font-style: normal; /* 字體樣式 */
}

上面的示例中，我們使用了字體圖標庫 FontAwesome 并且使用 Unicode 字符編碼插入圖標。這里需要注意的一點是，我們必須將字體文件引入到我們的 CSS 中。

除了 ::before 和 ::after 偽元素，我們還可以使用content屬性在 HTML 元素中插入字形圖標：



這種方法更加簡單，但是如果我們使用的圖標庫不支持 HTML 實體，我們可能需要使用::before和::after偽元素。

除了使用字形圖標庫，我們還可以使用 SVG 圖標來創(chuàng)建字符圖標。SVG 圖標可以通過<svg>元素嵌入到 HTML 中，并且具有可縮放性。

在這個示例中，我們創(chuàng)建了一個 SVG 圖標并插入一個路徑元素來定義圖標的形狀。通過設置viewBox屬性，我們可以指定 SVG 的大小。

總之，在網(wǎng)站中使用字符圖標可以幫助我們優(yōu)化用戶界面并提高用戶體驗。使用 CSS 和 SVG，我們可以輕松地創(chuàng)建和插入這些圖標。