Tutoriel Installer Font Awesome en version 5.3.1 et l'utiliser sur votre forum XenForo [2.0]

Nous vous conseillons de vérifier au préalable le contenu que vous téléchargez.
Si un lien de téléchargement ne fonctionne plus, merci de signaler le topic en question !

SyTry

Fondateur
SyTry Community
Fondateur
Messages
1 177
J'aime
806
Points
2 353
Hors ligne
#1
Salut à toi membre de SyTry Community !

Aujourd'hui je vous partage un tutoriel pour utiliser la version 5.3.1 de Font Awesome sur votre forum en XenForo 2.0 ! ;)

Dans votre template PAGE_CONTAINER cherchez ceci (CTRL + F) :
Code:
<head>
C'est celui du début de votre template. Ensuite ajoutez ceci en dessous :
Vous devez répondre à ce message pour voir ce contenu.
Ensuite rendez vous ici pour connaitre le code des icônes :
Vous n'avez pas la permission de voir le lien Connectez-vous ou inscrivez-vous dès maintenant.


Pour l'exemple voici le code d'un widget :​
Code:
SyTry Community<br>
<i class="fab fa-angrycreative"></i><br>
<i class="fas fa-door-open"></i><br>
<i class="fas fa-car-crash"></i><br>
<i class="fas fa-charging-station"></i>
Résultat :
Screenshot_1.png


Pour utiliser les Font Awesome en version 5.3.1 via du CSS, voici des exemples pour mon grade :​
Code:
.username--style3:before {
font-family: "Font Awesome 5 Free";
content: "\f5d0";
padding-right: 4px;
display: inline-block;
}
Résultat :
Screenshot_1.png


Egalement avec mon grade :​
Code:
.username--style3:before {
font-family: "Font Awesome 5 Brands";
content: "\f179";
padding-right: 4px;
display: inline-block;
}
Résultat :
Screenshot_2.png


Désormais le font-family est différent, voici les icônes en fonctions de la version des Font Awesome :​

Brands et Solid sont des versions gratuites, et Regular ainsi que Light des versions payantes (pro) !

Voici le code du font-family en fonction de la version :​

  • Brands : font-family: "Font Awesome 5 Brands";
  • Solid : font-family: "Font Awesome 5 Free";
  • Regular : font-family: "Font Awesome 5 Pro";
  • Light : font-family: "Font Awesome 5 Pro ";

Vous pouvez également retrouver l'utilisation des Font Awesome ici :
Vous devez répondre à ce message pour voir ce contenu.
J'autorise le partage de ce tutoriel avec les crédits : SyTry !​
SyTry,
 

Lucifer

Donateur
Donateur
Messages
31
J'aime
6
Points
613
Hors ligne
#2
merci l’ami, mais j’ai un problème, les FA ne fonctionnent pas chez moi :(
 

laurent68

Membre
Membre
Messages
24
J'aime
8
Points
598
Hors ligne
#3
Merci pour le partage ;)
Je pense qu'il faut installer la version 5.20 dans son ftp ?
 
Dernière édition:

SyTry

Fondateur
SyTry Community
Fondateur
Messages
1 177
J'aime
806
Points
2 353
Hors ligne
#4
Merci pour le partage ;)
Je pense qu'il faut installer la version 5.20 dans son ftp ?
Non y a rien a installer sur le FTP, seulement un lien pour l'intégration
 

MatXgaming

Ancien Staff
Ancien Staff
Messages
93
J'aime
16
Points
133
Hors ligne
#6
Merci pour la partage c'est cool
 

laurent68

Membre
Membre
Messages
24
J'aime
8
Points
598
Hors ligne
#7
Pour les codes CSS suffit de changer :

font-family: "FontAwesome";
Par :
font-family: "Font Awesome 5 Brands";
 

laurent68

Membre
Membre
Messages
24
J'aime
8
Points
598
Hors ligne
#9
Les codes css que tu mets dans extra.less
exemple avant tu mettais des codes qui ressemble a sa :

Code:
.username--style13:before {
    font-family: "FontAwesome";
    content: "\e910";
    padding-right: 4px;
    display: inline-block;
}
Pour la version 5.20 tu change le code font-family: "FontAwesome"; par font-family: "Font Awesome 5 Brands";
 

Tutifruti

Assistant
SyTry Community
Assistant
Messages
136
J'aime
34
Points
203
Hors ligne
#10
Merci, j'avais eu des problème avec les FA
 

SyTry

Fondateur
SyTry Community
Fondateur
Messages
1 177
J'aime
806
Points
2 353
Hors ligne
#11
Bonsoir,

Mise à jour du lien pour la version 5.3.1.
Modification du tutoriel : explications des 4 types d'icônes (brands, solid, regular, light) Font Awesome ainsi que un tutoriel sur l'utilisation du CSS.

SyTry,
 

luchugsat

Membre
Membre
Messages
22
J'aime
2
Points
58
Hors ligne
#13
Bonjour, une fois de plus un grand merci pour le travail fournis et partagé.
 

Sujets similaires

Haut Bas