我已经通过 Yarn 安装了 @fortawesome/react-fontawesome。如何在 SCSS 中使用字体？

Question

我正在尝试从中获取旋转木马：https://www.creative-tim.com/product/material-kit-react?partner=104080 并将其添加到我自己的反应项目中。但是，slick-prev 和 slick-next 按钮显示不正确。我看了一下套件自带的SCSS，是这样的：

.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%;
  }
}

我看到他们有与 "Font Awesome 5" 系列一起显示的内容，所以我一直在尝试将其安装到我的项目中。我使用了命令 yarn add @fortawesome/react-fontawesome，我发现的大部分内容都涉及将图标组件添加到 React，但当我希望能够使用 CSS 中的字体时。将此包作为字体导入的后续步骤是什么？

对于我的 React 组件，它看起来像这样：

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

使用 Slick Carousel 时，您必须导入所需的 CSS。像这样。 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"/>

使用 slick btn css 中的 font-family: Font Awesome\ 5 Free;，因为它与 react-fontawesome 无关。顺便提一句。还有一个 slick carousel 的反应端口 HERE

要在 React 中使用 Font Awesome，您必须安装一些东西。详情为 HERE.

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

那就这样用吧

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)

我已经通过 Yarn 安装了 @fortawesome/react-fontawesome。如何在 SCSS 中使用字体？

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

reactjs

sass

font-awesome-5