Estoy tratando de tomar el carrusel de esto: HTTPS: / /www.creative-tim.com/product/material-kit-reacct?partner=104080 y agréguelo a mi propio proyecto de reacción. Sin embargo, los botones Slick-Prev y Slick-Siguiente no se muestran correctamente. Eché un vistazo a los SCSS que vienen con el kit y se ve así:

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

Y veo que tienen contenido que se muestra con la familia "Awesome 5" de la fuente, así que he estado tratando de instalar eso en mi proyecto. Utilicé el comando yarn add @fortawesome/react-fontawesome, la mayoría de las cosas que encontré trataron de agregar componentes de iconos para reaccionar, cuando quiero poder usar la fuente en CSS. ¿Cuáles son los próximos pasos para importar este paquete como fuente?

Para mi componente de reacción, se ve así:

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
Garfield Tong 27 jun. 2019 a las 18:20

1 respuesta

La mejor respuesta

Cuando use el carrusel slick, debe importar el CSS necesario. Como esto. 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"/>

Se usa el font-family: Font Awesome\ 5 Free; en el Slick BTN CSS, porque no está con reacción-fontawesome. Por cierto. También hay un puerto de reacción de carrusel slick aquí

Para usar la fuente impresionante en reaccionar, tienes que instalar un par de cosas. Los detalles son aquí .

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

Entonces úsalo así

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)
1
Mario 27 jun. 2019 a las 15:27