Font Awesome 5在React中使用社交/品牌图标

Question

Font Awesome文档仅显示如何向React添加常规/实体字体.社交图标怎么样？

首先,我抓住了包裹:

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

注意:我换成npm i --save @fortawesome/free-solid-svg-icons \了npm i --save @fortawesome/free-brands-svg-icons \

然后在React中:

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

library.add(faFacebookF); 

并尝试使用组件:

<FontAwesomeIcon icon="fa-facebook-f" />

甚至试过:

并继续进入控制台

找不到图标{前缀:"fas",iconName:"fa-facebook-f"}

我相信我不得不得到fab品牌的前缀.

这是我想要使用的图标https://fontawesome.com/icons/facebook-f?style=brands

Answer 1

尝试:

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

请注意,字体真棒现在有不同的图标集.solid set(fas)是默认值.facebook图标位于品牌集(fab)中.

Answer 2

请注意，您必须运行首先运行的命令：

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

我尝试在不先安装的情况下导入 - 当然这不起作用。

Answer 3

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

const icon = <FontAwesomeIcon icon={faFacebook} />

我在FontAwesome的GitHub上发现了品牌图标的拼写/大小写

Answer 4

首先安装这些依赖项

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

创建自定义库initFontAwesome.js并粘贴此代码。

import { library } from "@fortawesome/fontawesome-svg-core";
import {fab, faTwitterSquare, faFacebook, faLinkedin, faGithub} from "@fortawesome/free-brands-svg-icons";

function initFontAwesome() {
    library.add(fab, faTwitterSquare, faFacebook, faLinkedin, faGithub);
}
export default initFontAwesome;

在App.js包含以下代码

import initFontAwesome from "./initFontAwesome";
initFontAwesome();

function App() {
  return (

   {/*---------Some code----------*/}

  );
}
export default App;

包括Home.jsx以下代码

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

{/*-------some Code---------*/}

<FontAwesomeIcon icon={['fab', 'twitter']} />

<FontAwesomeIcon icon={['fab', 'facebook']} />

<FontAwesomeIcon icon={['fab', 'linkedin']} />

<FontAwesomeIcon icon={['fab', 'github']} />

{/*-------Some Code---------*/}

This worked for me. I hope this helps!

Answer 5

首先

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

然后导入到你的项目中

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

用这个

<FontAwesomeIcon icon={faFacebookF} />