Как получить Font Awesome Icon в приложении реакции для псевдоэлемента в css - PullRequest
Новая
       13

Как получить Font Awesome Icon в приложении реакции для псевдоэлемента в css

0 голосов
/ 03 июня 2018

Ниже приведен мой 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 я хотел бы вставить значок шрифта потрясающий какпсевдоэлемент моей кнопки с идентификатором add-btn.Класс по умолчанию для элемента кнопки - .btn.

В файле css я попробовал его с этим синтаксисом #add-btn.btn::after, а также с .btn::after.И я попытался импортировать font-awesome.min.css в файл jsx, но он не дает мне значок. Вместо этого отображается квадрат .

PS Я также пытался импортировать его в index.js файл

Может ли кто-нибудь помочь мне с этим.

Ответы [ 3 ]

0 голосов
/ 18 апреля 2019

Вы можете просто использовать font-awesome в классе CSS до или после

попробовать этот код: 

.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;
}

если не работает, пожалуйста, убедитесь, что вы установили замечательную библиотеку

Как установить? проверить здесь >>

0 голосов
/ 18 апреля 2019

Ничего общего с 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>
0 голосов
/ 31 июля 2018

Использование 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;
}
...