当我添加 <a> 标签时，React FontAwesome Icon 消失了答案

【问题标题】：React FontAwesome Icon disappears when I add <a> tag当我添加 <a> 标签时，React FontAwesome Icon 消失了
【发布时间】：2020-09-20 01:28:16
【问题描述】：

我正在尝试将链接添加到我的字体真棒反应组件。

<div>
    <FontAwesomeIcon icon={faHome} size="2x" />
<div>

上面的组件渲染了faHome图标。

但是当我在它周围添加锚标记时，它不会呈现。当我在第一个示例中没有锚标记时，我仍然可以看到带有<svg> 标签的检查器工具中的组件也以相同的方式加载。

<div>
    <a href="https://www.youtube.com/c/jamesqquick">
        <FontAwesomeIcon icon={faHome} size="2x" />
    </a>
</div>

【问题讨论】：

这对您有帮助吗？ stackoverflow.com/questions/43320998/…

标签： reactjs font-awesome anchor react-component

【解决方案1】：

它运行良好。请检查以下代码：

import React from "react";
import "./styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHome } from "@fortawesome/free-solid-svg-icons";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div>
        <a href="https://www.youtube.com/">
          <FontAwesomeIcon icon={faHome} size="2x" />
        </a>
      </div>
    </div>
  );
}

Here is the Code Sandbox

Here is output

【讨论】：