Comment inclure une Police Génial icône de Réagir render()
Chaque fois que j'essaie d'utiliser une Police Génial icône de Réagir de render()
, elle n'est pas affichée sur la page web résultante bien qu'il travaille en HTML normal.
render: function() {
return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>;
}
Ici est un exemple vivant: http://jsfiddle.net/pLWS3/
Où est la faute?
- Notez que certains anciens réponses reportez-vous à
react-fontawesome
qui est la v4, et certains à l'officiel@fortawesome/fontawesome
composant qui prend en charge v5.
Vous devez vous connecter pour publier un commentaire.
Réagir utilise le
className
attribut, comme le DOM.Si vous utilisez la version de développement, et de regarder la console, il y a un avertissement. Vous pouvez voir cela sur le jsfiddle.
Si vous êtes nouveau à Réagir JS et à l'aide de créez-réagir-application de la cli de commande pour créer l'application, puis exécutez ce qui suit MNP commande pour inclure la dernière version de font-awesome.
d'importation font-awesome de votre index.js fichier. Ajoutez juste en dessous de la ligne de votre index.js fichier
ou
N'oubliez pas d'utiliser className comme attribut
../node_modules/
dans le chemin...import 'font-awesome/css/font-awesome.min.css';
fonctionne 🙂<i className="far fa-heart"></i>
ne fonctionne qu'avec font-awesome v5. Cette solution s'installe font-awesome v4Vous pouvez également utiliser le
react-fontawesome
icône de la bibliothèque. Voici le lien: réagir-fontawesomeDu mécanisme national de prévention de la page, il suffit de l'installer via npm:
Nécessitent le module:
Et enfin, l'utilisation de la
<FontAwesome />
composant et le passer dans les attributs de l'icône et de spécifier le style:N'oubliez pas d'ajouter le font-awesome CSS index.html:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
public
dossier et ajouter la feuille de style avec la bonnesrc
manuellement.https://github.com/FortAwesome/react-fontawesome
installer fontawesome & réagir-fontawesome
que dans votre composant
@fortawesome/fontawesome-free-regular
comme il n'est pas utilisé à partir de votre exemple.La solution la plus simple est:
Installer:
D'importation:
Utilisation:
Vous devez installer le paquet première.
OU
N'oubliez pas d'utiliser
className
au lieu declass
.Plus tard, vous devez les importer dans le fichier où vous voulez les utiliser.
ou
Après avoir lutté avec pendant un certain temps, je suis venu avec cette procédure (en fonction de la Police Impressionnant de documentation ici):
Comme indiqué, vous devrez installer fontawesome, réagir-fontawesome et fontawesome icônes de la bibliothèque:
et de l'importer ensuite tout à votre Réagissent application:
Voici la partie la plus délicate:
De modifier ou d'ajouter des icônes, vous aurez à trouver les icônes disponibles dans votre nœud bibliothèque de modules
c'est à dire
Chaque icône a deux fichiers: .js et .d.ts, et le nom de fichier indique l'importation de la phrase (c'est assez évident...), l'ajout d' en colère, gem et coche icônes ressemble à ceci:
À utiliser les icônes de vos Réagir code js, utilisation:
Le nom de l'icône peut être trouvé dans l'icône de l' .fichier js:
par exemple pour faCheckCircle regarder à l'intérieur de faCheckCircle.js pour " iconName variable:
et de Réagir code devrait ressembler à ceci:
Goodluck!
Alexandre réponse à partir de ci-dessus m'a vraiment aidé à sortir!
J'ai essayé d'obtenir des comptes " sociaux icônes dans le pied de page de mon application que j'ai créé avec ReactJS de sorte que je pourrais facilement ajouter d'un état de pointage pour eux, tout en ayant entre eux un lien sur mon comptes des réseaux sociaux. C'est ce que j'ai fini par avoir à faire:
Puis, au sommet de mon pied de page de la composante j'ai inclus ce:
Mon composant, puis ressemblait à ceci:
A travaillé comme un charme.
J'ai été expérimenté ce cas; j'ai besoin de réagir/redux site qui devrait parfaitement fonctionner dans la production.
mais il y avait un "mode strict'; Ne doit pas déjeuner avec ces commandes.
Devrait travailler avec seulement cliquez sur le build/index.html fichier.
Lorsque j'ai utilisé fontawesome avec npm font-impressionnant, il a été de travail, le mode de développement, mais de ne pas travailler dans la mode strict'.
Voici ma solution:
dans public/index.html
Après toutes les étapes ci-dessus, le fontawesome fonctionne très BIEN!!!
comme "Praveen M P' a dit que vous pouvez installer font-awesome comme un paquet. si vous avez de fil, vous pouvez exécuter:
Si vous n'avez pas de fil faire comme Praveen dit et à faire:
ce sera l'ajouter à vos projets les dépendances et l'installer dans votre dossier node_modules. dans votre App.js fichier ajouter
Caisse réagir icônes assez dope et bien travaillé.