Fontawesome 图标 React答案

【问题标题】：Fontawesome icons ReactFontawesome 图标 React
【发布时间】：2021-08-08 15:51:58
【问题描述】：

如何添加这样的图标（我从这个论坛的教程中添加）：

在反应？因为我是这样添加的：

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFacebookF } from '@fortawesome/free-brands-svg-icons' 


<FontAwesomeIcon icon={['fab', 'facebook-f']} className="fb-icon-style" />


library.add(faFacebookF);

---- 就是这样！但是现在我怎样才能添加这样的图标：https://fontawesome.com/icons/globe 或这个https://fontawesome.com/icons/youtube？

非常感谢！

【问题讨论】：

标签： reactjs windows icons

【解决方案1】：

你这样做：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFacebookF } from "@fortawesome/free-brands-svg-icons"


function App() {
  return (
    <div className="App">
      <FontAwesomeIcon icon={faFacebookF} />

    </div>
  );
}

export default App;

确保导入相关的 npm 包：

npm install --save @fortawesome/react-fontawesome
npm i --save @fortawesome/free-brands-svg-icons

【讨论】：

【解决方案2】：

下面的代码可以工作

解决方案

import { faFacebookF, faYoutube } from '@fortawesome/free-brands-svg-icons';
import { faGlobe } from '@fortawesome/free-solid-svg-icons'; 


<FontAwesomeIcon icon={faYoutube} />
<FontAwesomeIcon icon={faFacebookF} />
<FontAwesomeIcon icon={faGlobe} />

注意：如果尚未安装，请安装 @fortawesome/free-solid-svg-icons

【讨论】：

很高兴！如果有帮助，请接受并投票支持我们的答案。 :)