Как я могу вращать шрифт-удивительный значок при наведении без вращающихся текстов?

Я практикуюсь в 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 в этом?

1 3
html css css3 css-transforms

1 ответ:

Поверните псевдо-элемент, который создает значок: 

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>
3