I have installed @fortawesome/react-fontawesome via Yarn. How do I use the font in SCSS?

Question

I'm trying to take the carousel from this: https://www.creative-tim.com/product/material-kit-react?partner=104080 and add it to my own react project. However, the slick-prev and slick-next buttons aren't displaying properly. I took a look at the SCSS that came with the kit and it looks like this:

.slick-prev {
  left: 0;
  &::before {
    content: "\f053";
    font-weight: 600;
    font-family: Font Awesome\ 5 Free;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    color: white;
    font-size: 30px;
    width: 100%;
  }
}
.slick-next {
  right: 0;
  &::before {
    content: "\f054";
    font-weight: 600;
    font-family: Font Awesome\ 5 Free;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    color: #fff;
    font-size: 30px;
    width: 100%;
  }
}

and I see that they have content that is displayed with the "Font Awesome 5" family, so I've been trying to install that in my project. I used the command yarn add @fortawesome/react-fontawesome, most of the things I found dealt with adding Icon components to React though, when I want to be able to use the font in CSS. What are the next steps to import this package as a font?

For my React Component, it looks like this:

import React from 'react'
import Carousel from 'react-slick'

import "../styles/scss/carousel.scss";

const SectionCarousel = () => {
    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true
    };

    const image1 = 'https://demos.creative-tim.com/material-kit-react/static/media/bg.e5241971.jpg'
    const image2 = 'https://demos.creative-tim.com/material-kit-react/static/media/bg2.84378183.jpg'
    const image3 = 'https://demos.creative-tim.com/material-kit-react/static/media/bg3.e76de24b.jpg'

    return (
        <Carousel {...settings}>
            <img src={image1} alt="First slide" className="slick-image" />
            <img src={image2} alt="Second slide" className="slick-image" />
            <img src={image3} alt="Third slide" className="slick-image" />
        </Carousel>
    )
}

export default SectionCarousel

Answer 1

When using the Slick Carousel, you have to import the needed CSS. Like this. SLICK

!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick-theme.css"/>

The font-family: Font Awesome\ 5 Free; in the slick btn css is used, because it's not with react-fontawesome. Btw. there is also a react port of slick carousel HERE

To use Font Awesome in react, you have to install a couple of things. The details are HERE.

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/react-fontawesome

Then use it like this

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)