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

尝试：

mongo GUI

请注意，真棒字体现在具有不同的图标集。实集（<FontAwesomeIcon icon={['fab', 'facebook-f']} />）是默认设置。 Facebook图标位于品牌集（fas）中。

Answer 2

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

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

我在FontAwesome's GitHub

上发现了品牌图标的拼写/大小写

Answer 3

首先

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} />

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

我尝试不先安装就导入-当然是行不通的。

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

5 个答案: