Brand и Regular fonawesome не отображаются

Я работаю над реагирующим приложением. Я включил бесплатное приложение «React-Fontawesome». Проблема заключается в том, что обычные и фирменные шрифты HTML не отображаются в выходном HTML, но сплошные шрифты работают правильно. Как я могу решить эту проблему?

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'

заголовок.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>

reactjs

29.04.2019 09:15

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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);

Ищите значки здесь в репозитории github для шрифтОтличный.

29.04.2019 10:15