Question

我正试图从中取出旋转木马：https://www.creative-tim.com/product/material-kit-react?partner=104080 并将其添加到我自己的react项目中。但是，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，但是我发现大多数事情都是在我希望能够在CSS中使用字体时将Icon组件添加到React。将该包导入为字体的下一步是什么？

对于我的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

<button style={{ display: this.props.locations.length === this.props.conLocations.length ? "none" : "block" }} className="allLargeBtn" onClick={()=>{this.allLocations()}}>**Add all locations**</button>

使用光滑的btn 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.css"/>  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick-theme.css"/>，因为它不带有react-fontawesome。顺便说一句。还有一个光滑的转盘HERE

的反应端口

要在React中使用Font Awesome，您必须安装一些东西。详细信息是HERE。

font-family: Font Awesome\ 5 Free;

然后像这样使用它

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

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

1 个答案: