Tuto [XenForo] "Font Awesome" icone à coter des pseudo

[Greg2895]

Salut

Je vais vous montrer et vous expliquer par le biais de ce Tutoriel :
Comment ajouter des icône "Font Awesome" qui tourne à 400 degrés à coté de vos pseudo.
Pour faire ce Tuto il vous faudra avoir le CMS : XenForo

Pour commencer se tutoriel il faut vous rendre dans votre Admin CP (Panel d'Administration), en cliquant sur le bouton "Admin CP" en haut de votre forum à gauche ou à droite selon votre thème. Ou en vous rendant à cette adresse : www.votrenomdedomaine.fr/admin.php.

A l’accueil de votre Admin CP, cliquez sur Styles, puis cliquez sur "Template" sur le style de votre forum.

Spoiler: Aide images 1

Ensuite rechercher la template "page_container_js_head" dans la barre de recherche puis ouvrer la template.
Chercher "<!--XenForo_Require:JS-->" avec un CTRL+F, puis ajoutez en dessous se code :

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

Sauvegarder et revenez en arrière.

Spoiler: Aide image 2

Maintenant, recherchez la Template "EXTRA.css", et ouvrez la.

Spoiler: Aide images 3

Ajoutez y se code :

.username .style3:before {
content: "\f005";
font-family: FontAwesome;
margin-right: 4px;
display: inline-block;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.username:hover .style3:before {
-webkit-transform: rotate(400deg);
-moz-transform: rotate(400deg);
-ms-transform: rotate(400deg);
-o-transform: rotate(400deg);
}

Spoiler: Screen 2

Dans le code, le "style3" : C'est le groupe d'utilisateur, pour savoir le numéro d'un groupe allez dans Utilisateurs > Groupe d'utilisateur puis cliquez sur le groupe, regardez dans l'URL le numéro. Remplacez le 3 par le numéro.

Spoiler: Aide image 4

Pour changer l'icône, il vous suffit de vous rendre à cette adresse :
- http://fontawesome.io/icons/

Et de choisir une icône parmi les 675 icônes disponible.
Par exemple :
Je choisi cette icône : http://fontawesome.io/icon/diamond/
Il me suffit de prendre l'Unicode qui est "f219"

Spoiler: Screen 1

Copier l'Unicode et remplacez le à la ligne "content" juste après le "/"
Cela donnera : content: "\f219";

Si vous souhaitez changer la vitesse de rotation, changez le nombre de ces ligne :

-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;

Pour finir, si vous souhaitez changer le degrés de la rotation de votre icone, il vous suffit de changer les numéro (le degrés) de ces lignes :

-webkit-transform: rotate(400deg);
-moz-transform: rotate(400deg);
-ms-transform: rotate(400deg);
-o-transform: rotate(400deg);

Puis il vous suffit simplement de sauvegarder et de quitter la template, et de recommencer pour un autre grade

Pour toutes questions ou demande d'aide, n'hésitez pas à venir ici :
https://mtxserv.com/forums/threads/aide-pour-votre-forum-sous-xenforo.11188/
Ou par message privé

</> The Phantom​

 

[Taink]

Joli tuto, idéalement tu pourrais expliquer certaines lignes de code, mais sinon c'est nickel
Bref bonne continuation.

 

[Virus Trakers]

Le premier code :<link rel="stylesheet" href="font-awesome-4.1.0/css/font-awesome.min.css"> Ne fonctionne pas avec un certain thème !

Et les pseudos de ce forum ne sont absolument pas centrer !

 

[Greg2895]

Le premier code :<link rel="stylesheet" href="font-awesome-4.1.0/css/font-awesome.min.css"> Ne fonctionne pas avec un certain thème !

Et les pseudos de ce forum ne sont absolument pas centrer !

Lequel ?
Vu que certains ont déjà le font awesome d'incorporer il n'est pas obligé d'y ajouter cette ligne

 

[Virus Trakers]

https://virus-world.com/index.php Ce thème sur mon forum

 

[Greg2895]

https://virus-world.com/index.php Ce thème sur mon forum

Ton thème est pas à jour ou mal installé

 

[Trunks-Sama]

Salut Greg, je suis actuellement sur XenForo 2.1 avec le thème Flat Awesome et je n'arrive pas pourrais tu m'aider ?