CSS可以让我们的网站更加美观，其中一个常见的效果就是旋转图标。

首先，我们需要为这个标签创建一个class属性，并设置其宽高为相等的数值，这样标签就变成了一个正方形。

.rotate-icon {
width: 20px;
height: 20px;
}

接下来，我们可以利用CSS3中的transform属性，来让这个标签旋转。我们以默认状态下的垂直方向为标准，让其旋转45度，并且设置其在旋转过程中缓慢运动，代码如下：

.rotate-icon {
width: 20px;
height: 20px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: -webkit-transform .5s ease-in-out;
-moz-transition: -moz-transform .5s ease-in-out;
-o-transition: -o-transform .5s ease-in-out;
transition: transform .5s ease-in-out;
}

其中，-webkit、-moz、-ms、-o分别针对不同的浏览器内核，transform属性表示旋转，transition属性表示其在旋转过程中缓慢运动，并会自动回到原位。

最后，我们将这个标签的class应用于需要旋转的图标上，如下：

<i class="rotate-icon"></i>

这样，我们就可以在网站中实现旋转图标的效果了。当然，我们还可以通过设置不同的度数和运动时间，来达到不同的效果。