如何在 css 中的伪元素的响应应用程序中获取字体真棒图标

Question

以下是我的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文件中，我想插入一个字体真棒图标作为我的按钮的伪元素，IDadd-btn.按钮元素的默认类是.btn。

在css文件中，我已经尝试了这个语法#add-btn.btn::after，这也.btn::after。 我也尝试在 jsx 文件中导入font-awesome.min.css，但它没有给我图标。相反，它显示一个正方形。

附言我也尝试将其导入index.js文件中

谁能帮我解决这个问题。

Answer 1

与 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>

Answer 2

您可以在 css 类之前或之后简单地使用 font-awesome

试试这段代码：

.class-name:before {
font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "f1ea";
position:absolute;
color:#ccc;
top:0;
right:0;
font-size:25px;
font-weight:500;
z-index:-1;
opacity:0.5;
}

如果不起作用，请确保您安装了字体真棒库

如何安装？查看此处>>

Answer 3

更多图标和更简单的 react-native 元素🚀方法

你也可以使用fontawesome，如下所述： https://reactnativeelements.com/docs/next/components/icon

示例：在这里，您会在文本之前🏷️看到一个价格标签图标

import { Icon } from '@rneui/themed';
...
<View style={styles.iconWrapper}>
<Icon name="tag" type="material-community" color="grey" size={12} />
<Text style={styles.text}>YOUR TEXT</Text>
</View>
const styles = StyleSheet.create({
iconWrapper: {
display: 'flex',
flexDirection: 'row',
},
text: {
fontSize: 12,
color: 'grey',
},
});

Answer 4

使用 SVG 作为背景图像：

.angle-after:after {
display: block;
content: '';
background-image: url('../../node_modules/@fortawesome/fontawesome-pro/svgs/light/angle-right.svg');
background-size: 28px 28px;
height: 28px;
width: 28px;
}