Following is my css file:
@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;
}
And this is my jsx file.
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;
In the css file above, I would like to insert a font awesome icon as a pseudo element of my button with id add-btn. The default class of the button element is .btn .
In the css file, I have tried it with this syntax #add-btn.btn::after, and this as well .btn::after.
And I have tried with importing font-awesome.min.css in the jsx file too, yet it is not giving me the icon. Instead it is displaying a square.
P.S I also tried importing it in the index.js file
Could anyone help me with this.
edited out rant about the mental huffing midgetry that is React
Oh, wait... simpler answer. It's not react's fault (Well it is since it's crap that teaches you how NOT to use web technologies, but that's not the IMMEDIATE problem.)
Double-arrow's are not in "free" they're in "solid". You're loading the wrong font. So much wasteful garbage in there I missed the obvious.
Part of me wants to applaud FA for breaking it up into multiple fonts, MOST of me is pissed with them that HOW they broke them up seems to have NOTHING to do with how I use them so I end up loading all three files... at which point back to making my own font and copying into it just the ones I'm actually using... at which point just give us a monolithic file so we can AT LEAST reduce the number of handshakes... but no...
Brandon
Frontend Developer
If it's showing up as a square then the font file isn't loading or isn't named correctly. It's also possible that the wrong icon value is being specified relative to the font file (for example 4.x versions use a different scheme than 5.x versions of FontAwesome).