CSS 中的 Icon 圖片使用方法

CSS 中的 Icon 圖片可以增強網站的視覺效果，讓網站更具有吸引力。下面詳細介紹 CSS 中 Icon 圖片的使用方法。

/* 引入 Icon 圖片樣式表 */
@import url('https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css');
/* 創建 Icon 圖片 *//* 設置顏色和大小 */
.fa-heart {
color: red;
font-size: 24px;
}
/* 使用不同風格的 Icon 圖片 *//* 實心 *//* 空心 *//* 框架 */
/* 改變 Icon 圖片大小 */
.fa-check {
font-size: 32px;
}
/* 旋轉 Icon 圖片 */
.fa-github {
transform: rotate(90deg);
}

上述代碼中，首先需要引入 Icon 圖片的樣式表。目前比較流行的 Icon 圖片庫有 FontAwesome 和 Iconfont，這里介紹的是 FontAwesome。

使用 Icon 圖片時，我們需要創建一個 HTML 元素來承載 Icon 圖片的樣式。在 FontAwesome 中，使用元素，并設置其class屬性即可。

在設置 Icon 圖片的顏色和大小時，我們可以使用 CSS 的屬性來實現。在 FontAwesome 中，Icon 圖片的類名以.fa-開頭，后面跟隨 Icon 圖片的名稱。例如，.fa-heart表示紅心。

除了常見的實心和空心風格外，FontAwesome 還提供了大量的框架和特殊風格的 Icon 圖片，例如 GitHub 的 Octicons 圖片。

如果我們需要修改 Icon 圖片的大小，只需要為 Icon 圖片設置font-size屬性即可。

為了增加視覺效果，有時候我們還需要旋轉 Icon 圖片。在 CSS 中，使用transform屬性可以實現旋轉效果，旋轉角度使用角度值表示。例如，rotate(90deg)表示順時針旋轉90度。

CSS 中的 Icon 圖片使用方法多種多樣，希望本文能夠對大家有所幫助。