I am working on react app. I have include free 'react-fontawesome' in ny application. The issue is that a Regular and Brand fonts HTML is not rending in output HTML but solid fonts are working properly. How can i fix this issue?

App.js

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'

header.js

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

<div className="social-icons">
  <ul>
    <li><a href="javascript:void(0)" className="facebook"><FontAwesomeIcon icon={["fab", 'facebook']}/></a></li>
    <li><a href="javascript:void(0)" className="twitter"><FontAwesomeIcon icon={["fab", 'twitter']}/></a></li>
  </ul>
 </div>

1 Answers

1
tarzen chugh On Best Solutions
import React from "react";
import ReactDOM from "react-dom";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFacebook, faTwitter } from '@fortawesome/free-brands-svg-icons'

import "./styles.css";

function App() {
  return (
    <div className="App">
        <ul>
          <li>
            <a href="#" className="facebook"><FontAwesomeIcon icon={faFacebook}/></a>
          </li>
          <li>
            <a href="#" className="twitter"><FontAwesomeIcon icon={faTwitter}/></a>
          </li>
        </ul>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Look for icons here in github repo for fontAwesome