react 中引入 fontawesome 字体包。free-brands-svg 引入的使用问题

以上就是具体的代码;

使用步骤是:

首先     npm i --save   @fortawesome/free-solid-svg-icons@prerelease

            @fortawesome/fontawesome-svg-core@prerelease
            @fortawesome/react-fontawesome@prerelease
            @fortawesome/free-brands-svg-icons@prerelease
             @fortawesome/free-regular-svg-icons@prerelease
然后在 index.js 引入
  
import { library } from '@fortawesome/fontawesome-svg-core';
import {
    faTachometerAlt,
    faAngleLeft,
    faAngleDown,
    faWifi,
    faUmbrella,
    faTasks,
    faLaptop
} from '@fortawesome/free-solid-svg-icons';
import { fab} from "@fortawesome/free-brands-svg-icons";//商标元素 则需要添加前缀
  import { far } from "@fortawesome/free-regular-svg-icons";

library.add(
    faTachometerAlt,
    faAngleLeft,
    faAngleDown,
    faWifi,
    fab,
   far, faUmbrella, faTasks, faLaptop )

 在 其它组件中调用

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  <FontAwesomeIcon icon="angle-left" className={Appcss.iconright} />
使用fab 商标元素的时候添加前缀
 <FontAwesomeIcon icon={["fab","apple"]} className={Appcss.iconright} />                                                                                                      

看不明白的同学也可以上这里看 https://reactjsexample.com/official-react-component-for-font-awesome-5/

转载于:https://www.cnblogs.com/RoadAspenBK/p/9988039.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值