CSS 是我們日常前端開發中非常重要的一部分，它可以控制頁面的樣式，包括顏色、布局、字體等等。而小圖標作為網頁中的細節之一，它可以很好地提升網頁的視覺效果和用戶體驗。本文將介紹 CSS 如何讀取小圖標位置。 首先，我們需要在 CSS 中定義小圖標的位置，通常使用 background-position 屬性來指定。例如： ```html``` 上述代碼中，我們定義了一個類名為 `icon` 的元素，使用了 `background-image` 屬性指定了小圖標的圖片，并使用 `background-position` 指定了它在圖片中的位置。這里我們將小圖標放在圖片的左上角，因此橫向偏移量和縱向偏移量都是 0。 接下來，我們可以使用偽元素 `::before` 或 `::after` 來將小圖標添加到元素中。需要注意的是，在使用偽元素時，必須設置其 `content` 屬性，否則不會顯示。 ```html

這是一段帶小圖標的文本

``` 上述代碼中，我們使用了 `::before` 偽元素，并將其設置為內聯塊元素。我們將其寬高設置為 16px，以匹配小圖標的大小。接著，通過設置 `background-image` 和 `background-position` 屬性來指定小圖標的位置，最后在 `p` 元素內嵌套一個 `span` 元素，并為其添加類名 `icon`，即可在文本中插入小圖標。 總結一下，CSS 讀取小圖標位置的方法如下： 1. 在 CSS 中設置小圖標的位置，使用 `background-position` 屬性指定其在圖片中的位置。 2. 在使用偽元素 `::before` 或 `::after` 將小圖標添加到元素中時，設置 `content` 屬性，并使用 `background-image` 和 `background-position` 屬性指定小圖標的位置。 以上便是 CSS 讀取小圖標位置的介紹。希望對您有所幫助！