Tutoriel Installer Font Awesome en version 5.7.2 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 !

Membres qui ont lu cette discussion : 4

SyTry

SyTry

Fondateur
SyTry Community
Fondateur
Posteur du mois
#1
Messages
1 584
J'aime
1 051
Points
3 603
Hors ligne
#1
Salut à toi membre de SyTry Community !

Aujourd'hui je vous partage un tutoriel pour utiliser la version 5.7.2 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.6.3 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,​
 
L

Lucifer

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

laurent68

Membre
Membre
#3
Messages
24
J'aime
9
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

SyTry

Fondateur
SyTry Community
Fondateur
Posteur du mois
#4
Messages
1 584
J'aime
1 051
Points
3 603
Hors ligne
#4
laurent68 a dit:
Merci pour le partage ;)
Je pense qu'il faut installer la version 5.20 dans son ftp ?
Cliquez pour agrandir...
Non y a rien a installer sur le FTP, seulement un lien pour l'intégration
 
BlackBetting

BlackBetting

Ancien Staff
Ancien Staff
#6
Messages
95
J'aime
18
Points
633
Hors ligne
#6
Merci pour la partage c'est cool
 
L

laurent68

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

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

laurent68

Membre
Membre
#9
Messages
24
J'aime
9
Points
598
Hors ligne
#9
Lucifer a dit:
Ou ça ??
Cliquez pour agrandir...
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

Tutifruti

Ancien Staff
Ancien Staff
#10
Messages
143
J'aime
37
Points
703
Hors ligne
#10
Merci, j'avais eu des problème avec les FA
 
SyTry

SyTry

Fondateur
SyTry Community
Fondateur
Posteur du mois
#11
Messages
1 584
J'aime
1 051
Points
3 603
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,
 
L

luchugsat

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

SyTry

Fondateur
SyTry Community
Fondateur
Posteur du mois
#20
Messages
1 584
J'aime
1 051
Points
3 603
Hors ligne
#20
Salut, mise à jour du lien Font Awesome en version 5.6.3 ! ;)

SyTry,
 
Vous devez vous connecter ou vous enregistrer pour répondre ici.
Créateur Sujets similaires Forum Réponses Date
TomPablo Résolu Comment installer Font Awesome sous XenForo 2.0 Résolues 4
GERINO Tutoriel Télécharger et installer windows facilement ! Informatiques 2
CRUEL-MODZ Tutoriel Installer XenForo en localhost ou sur un hébergeur ! Astuces et tutoriels 5
Squeakers Tutoriel PS3 CFW - Installer un EBOOT et un SPRX Consoles 0
Squeakers Tutoriel Installer un PKG sur une PS3 CFW Consoles 0

Sujets similaires

Haut Bas