如何使字体真棒图标旋转

FontAwesome是一种广泛使用的字体图标库，它可以帮助开发人员在网站或应用程序中轻松添加符号和图标。本文将介绍如何使用CSS将FontAwesome图标旋转。

1. 导入FontAwesome库

在页面的标记中包含FontAwesome的CDN或下载到您的本地文件中。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

或者

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

2. 为FontAwesome添加类

添加FontAwesome图标，例如：

<i class="fa fa-spinner"></i>

在这个例子中，我们选择 'fa-spinner' 图标。

3. 旋转图标

为了旋转FontAwesome图标，我们需要使用CSS3的transform属性。下面是将图标旋转90度的CSS代码。

.fa-spinner {
   transform: rotate(90deg);
}

您也可以旋转图标到其他度数。例如转180度的代码如下：

.fa-spinner {
   transform: rotate(180deg);
}

还可以通过使用CSS动画将图标旋转。下面是一个例子：

.fa-spinner {
   animation: spin 2s infinite linear;
}
@keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}

这将使图标无限旋转，持续时间为2秒，并按线性时间函数进行动画。您可以通过更改关键帧的度数来更改旋转速度和方向。

4. 结论

FontAwesome是一种广泛使用的字体图标库，可以轻松添加符号和图标。通过使用CSS3的transform属性，我们可以在网站或应用程序中旋转FontAwesome图标。