Vraag Hoe een Font Awesome-pictogram in React's render () op te nemen


Telkens wanneer ik een pictogram van een lettertype Awesome probeer te gebruiken in de weergave van React (), wordt dit niet weergegeven op de resulterende webpagina, hoewel het werkt in normale HTML.

render: function() {
    return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>;
}

Hier is een levend voorbeeld: http://jsfiddle.net/pLWS3/

Waar is de fout?


54
2018-04-16 17:49


oorsprong


antwoorden:


React gebruikt de className kenmerk, zoals de DOM.

Als u de ontwikkelversie gebruikt en naar de console kijkt, is er een waarschuwing. Je kunt dit zien op de jsfiddle.

Waarschuwing: onbekende eigenschapsklasse DOM. Bedoelde u className?


48
2018-04-16 18:01



Als je bent nieuw voor React JS en gebruiken create-react-app cli commando om de applicatie te maken, voer dan de volgende NPM-opdracht uit om de nieuwste versie van font-awesome toe te voegen.

npm install --save font-awesome

importeer font-awesome naar uw index.js bestand. Voeg eenvoudig de onderstaande regel toe aan uw index.js-bestand

import '../node_modules/font-awesome/css/font-awesome.min.css'; 

of

import 'font-awesome/css/font-awesome.min.css';

Vergeet niet te gebruiken naam van de klasse als attribuut

 render: function() {
    return <div><i className="fa fa-spinner fa-spin">no spinner but why</i></div>;
}

158
2017-07-08 10:33



U kunt ook de react-fontawesome pictogram bibliotheek. Hier is de link: reactie-fontawesome

Ga vanaf de NPM-pagina gewoon via npm:

npm install --save react-fontawesome

Vereis de module:

var FontAwesome = require('react-fontawesome');

En gebruik tenslotte de <FontAwesome /> component en pass in attributen om het pictogram en de styling te specificeren:

var MyComponent = React.createClass({
  render: function () {
    return (
      <FontAwesome
        className='super-crazy-colors'
        name='rocket'
        size='2x'
        spin
        style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
      />
    );
  }
});

17
2018-03-25 20:53



https://github.com/FortAwesome/react-fontawesome

installeer fontawesome & react-fontawesome

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome
$ npm i --save @fortawesome/fontawesome-free-solid
$ npm i --save @fortawesome/fontawesome-free-regular

dan in je component

import React, { Component } from 'react';
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-free-solid'
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>
          <FontAwesomeIcon icon={faCoffee} />
        </h1>
      </div>
    );
  }
}

export default App;

8
2018-02-21 11:58



Ik heb deze zaak ervaren; Ik heb de react / redux-site nodig die perfect zou moeten werken in de productie.

maar er was een 'strikte modus'; Zou het niet moeten lunchten met deze commando's.

yarn global add serve
serve -s build

Moet werken met alleen klikken op het bestand build / index.html. Toen ik fontawesome gebruikte met npm font-awesome, werkte het in de ontwikkelmodus maar werkte niet in de 'strict mode'.

Hier is mijn oplossing:

public/css/font-awesome.min.css
public/fonts/font-awesome.eot 
*** other different types of files(4) ***
*** I copied these files for node_module/font-awesome ***
*** after copied then can delete the font-awesome from package.json ***

in public / index.html

<link rel="stylesheet" href="%PUBLIC_URL%/css/font-awesome.min.css">

Na alle bovenstaande stappen werkt het geweldige werk NICE !!!


2
2018-02-24 08:50



U moet het pakket eerst installeren.

npm install - laat reageren-fontawesome
OF
 npm i --save @ fortawesome / react-fontawesome

Vergeet niet te gebruiken naam van de klasse in plaats van klasse.

Later moet u ze importeren in het bestand waar u ze wilt gebruiken.

importeer 'font-awesome / css / font-awesome.min.css'

OF

import FontAwesomeIcon van '@ fortawesome / react-fontawesome'


2
2018-03-23 04:24



zoals 'Praveen M P' zei dat je font-awesome als een pakket kunt installeren. als u garen heeft, kunt u uitvoeren:

 yarn add font-awesome

Als je geen garen hebt zoals Praveen zei en deed:

npm install --save font-awesome

dit zal het pakket toevoegen aan de afhankelijkheden van uw projecten en het pakket installeren in uw map node_modules. in uw App.js bestand toevoegen

import 'font-awesome/css/font-awesome.min.css'

1
2018-01-19 00:13



Uitchecken reageer pictogrammen behoorlijk dope en werkte goed.


0
2018-03-11 17:07