在 React 中让图标在悬停时旋转

Question

我的项目中有一些字体很棒的图标，包裹在“a”标签中。我想让它们在悬停时旋转，但不太明白如何实现它。

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';
import logo from "../images/logo.png";

library.add(fab)

function Footer() {
    return (
        <footer>
            <div className="socials">
                <a href="/">
                    <FontAwesomeIcon icon={["fab", "facebook"]}/>
                </a>
                <a href="/">
                    <FontAwesomeIcon icon={["fab", "instagram"]}/>
                </a>
                <a href="/">
                    <FontAwesomeIcon icon={["fab", "twitter"]}/>
                </a>
            </div>
            <div>
            <a href="#home"><img src={logo} alt="Crepes&Burgers"/></a>
                </div>
        </footer>
    );
}

export default Footer;

Answer 1

你可以试试这个：

import React from "react";
import "./styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { fab } from "@fortawesome/free-brands-svg-icons";

library.add(fab);

function Footer() {
  return (
    <footer>
      <div className="socials">
        <a href="/">
          <FontAwesomeIcon className="icon" icon={["fab", "facebook"]} />
        </a>
        <a href="/">
          <FontAwesomeIcon className="icon" icon={["fab", "instagram"]} />
        </a>
        <a href="/">
          <FontAwesomeIcon className="icon" icon={["fab", "twitter"]} />
        </a>
      </div>
    </footer>
  );
}

export default Footer;

CSS：

.icon {
  padding: 5px 10px;
}
.icon:hover {
  transform: rotate(45deg);
  transition: all 0.25s ease-in-out;
}