CSS 可以輕松地旋轉字體圖標，運用旋轉效果可以使得網站視覺效果更加豐富多彩。

.icon {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 30px;
color: #333;
transition: transform .5s;
}
.icon:hover {
transform: rotate(180deg);
}

有了上面這段 CSS，只需要在 HTML 中添加一個 FontAwesome 字體圖標的類名，就能實現鼠標懸停時旋轉的效果。

首先，定義使用 Font Awesome 5 Free 的字體家族，并設置字體圖標的大小、顏色等基本屬性。通過添加 transition 屬性，我們可以讓過渡效果變得更加平滑。

上述 pre 標簽包含的代碼將一個字體圖標旋轉 180 度，該效果是在鼠標懸停時觸發的?？梢允褂貌煌闹祦碓O置旋轉的角度，例如 90 度、360 度等等。

這樣，就可以通過少量的 CSS 代碼實現字體圖標的旋轉效果，讓頁面更加有趣又豐富。