如何在悬停时旋转Font Awesome图标而不旋转文字？

Question

如何在悬停时旋转Font Awesome图标而不旋转文字？

4

我正在练习HTML，但遇到了问题。
首先是我的代码：

i:hover{
  transform: rotate(360deg);
  transition: 1s all;
}
i{
  transition: 1s all;
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="style.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
 <i class="fa fa-car">This is a car.</i>
</body>
</html>

我希望当鼠标移到图标和文字上时，图标能够旋转，但是当我使用此代码时，整个文本都会旋转。我该如何让我的汽车旋转而不使整行旋转？我需要使用JavaScript吗？

- JustSingleUser

1

通常情况下，您不会在 Font Awesome 的“i”标签内放置文本。 - Daniel B

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

旋转创建图标的伪元素:

i:hover::before {
  transform: rotate(360deg);
}

i:before {
  display: inline-block;/* mandatory to be able to use transform */
  transition: 1s all;
}

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

<i class="fa fa-car">This is a car.</i>