以下是我的 CSS 文件:
@import '~font-awesome/css/font-awesome.min.css';
.btn {
position: relative;
text-align: center;
border-radius: 100% 0 0 100% !important;
height: 35px;
width: 35px;
font-size: 12px !important;
background-color: white !important;
color: dodgerblue !important;
border-color: dodgerblue !important;
transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#add-btn.btn::after {
position: absolute;
font-family: 'Font Awesome 5 Free';
content: '\f101';
font-size: 15px;
}
这是我的 jsx 文件。
import React, { Component } from 'react';
import { Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle, Button } from 'reactstrap';
// import 'font-awesome/css//font-awesome.min.css';
import './Books.css';
class BookCard extends Component {
render() {
return (
<div className="BookCard mx-auto">
<Card>
<div className="img-container">
<CardImg src={this.props.book.imageUrl} />
</div>
<CardBody>
<CardTitle>{this.props.book.title}</CardTitle>
<CardSubtitle className="mb-2">{this.props.book.subtitle}</CardSubtitle>
<div className="description">
<CardText>{this.props.book.description}</CardText>
</div>
<div className="button-container">
<Button id="add-btn">Add</Button>
</div>
</CardBody>
</Card>
</div>
);
}
}
export default BookCard;
在上面的 css 文件中,我想插入一个很棒的字体图标作为我的按钮的伪元素,id 为 add-btn
。按钮元素的默认类是 .btn
。
在 css 文件中,我尝试过使用这种语法 #add-btn.btn::after
,还有 .btn::after
。
我也尝试过在 jsx 文件中导入 font-awesome.min.css
,但它没有给我图标。 而是显示一个正方形。
P.S 我也试过在 index.js
文件中导入它
谁能帮我解决这个问题。
最佳答案
与 React 无关
粗体字体,在您输入正确的font-weight
之前不会显示
问题示例
.test {
font-size: 5em;
}
.test:after {
position: absolute;
font-family: 'Font Awesome 5 Free';
content: '\f101';
}
<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet" />
<div class="test"></div>
修复
添加了font-weight: 900;
.test {
font-size: 5em;
}
.test::after {
position: absolute;
font-family: 'Font Awesome 5 Free';
content: '\f101';
font-weight: 900;
}
<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet" />
<div class="test"></div>
关于css - 如何在 react 应用程序中为 css 中的伪元素获取 Font Awesome 图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50670532/