CSS 文字上方圖標 CSS提供了許多方法來增強文本的表現形式，其中一個常見的方法是在文本上方添加圖標。這種技術通常用于顯示警告、提示或成功信息。在這篇文章中，我們將學習如何使用CSS來實現這種效果。 首先，我們需要選擇一個圖標。有許多圖標集可供選擇，例如Font Awesome、Material Icons等。我們選擇Font Awesome作為示例圖標集。 要在文本上方添加Font Awesome圖標，我們可以使用偽元素::before或::after。下面是一個示例代碼，其中圖標是一個警告符號： pre { white-space: pre-wrap; word-wrap: break-word; background-color: #f0f0f0; padding: 10px; border-radius: 5px; } p { position: relative; padding-left: 25px; font-size: 16px; line-height: 1.4; } p::before { content: "\f071"; font-family: "Font Awesome 5 Free"; position: absolute; left: 0; top: 0; font-size: 24px; color: #e74c3c; } 在上面的代碼中，我們使用了一個pre標簽作為演示文本，為文本添加了一些基本樣式。我們還使用了一個p標簽作為包裹文本和圖標的容器，并使用了position屬性來創建一個相對于p標簽的絕對定位元素，這可以讓圖片出現在文本上方。 ::before偽元素包含圖標的內容屬性(content)和字體屬性(font-family)。在這個例子中，我們使用了Font Awesome的新版圖標來設置content屬性，并使用了Font Awesome 5免費版的字體（font-family）。 要在CSS中定義一個圖標，我們需要知道該圖標的Unicode值。Font Awesome提供了一個Unicode編碼圖，可簡化這個過程。上面的代碼中，我們使用了該圖標的Unicode值，該值為"\f071"。 我們使用了left和top屬性來定位圖標的位置，字體大小設置為24像素，并使用color屬性將圖標顏色設置為紅色。 最后，我們將padding-left屬性設置為25像素，讓文本不會與圖標重疊。 總結 在這篇文章中，我們學習了如何使用CSS和Font Awesome添加一個在文本上方的圖標。通過使用偽元素::before或::after和position屬性，我們能夠創建精美的文本效果，更好地呈現網站內容。