Я установил @ fortawesome / реагировать-fontawesome через пряжу. Как мне использовать шрифт в SCSS? - PullRequest
Новая
       23

Я установил @ fortawesome / реагировать-fontawesome через пряжу. Как мне использовать шрифт в SCSS?

1 голос
/ 27 июня 2019

Я пытаюсь взять карусель из этого: https://www.creative -tim.com / product / material-kit-реакции? 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, но большинство вещей, которые я нашел, касалось добавления компонентов Icon в 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

1 Ответ

1 голос
/ 27 июня 2019

При использовании 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"/>

font-family: Font Awesome\ 5 Free; в гладком btn css используется, потому что это не с реакционно-понятным.Btw.есть также реактивный порт гладкой карусели ЗДЕСЬ

Чтобы использовать Font Awesome в реакции, вы должны установить несколько вещей.Подробности ЗДЕСЬ . 

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