Sign in
Log inSign up

Inserting FontAwesome Icons in a react app for pseudo element

Amaan Kulshreshtha's photo
Amaan Kulshreshtha
·Jun 3, 2018

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.

4