我已经通过 Yarn 安装了 @fortawesome/react-fontawesome。如何在 SCSS 中使用字体?
I have installed @fortawesome/react-fontawesome via Yarn. How do I use the font in SCSS?
我正在尝试从中获取旋转木马: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
使用 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)
我正在尝试从中获取旋转木马: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
使用 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)