Résolu Xenforo l Intégrer Font Awesome

[Alain LeThug]

Bonjour à vous, j'ai un forum xenforo avec le thème #Rekt et je n'arrive pas à ajouter les Font Awesome dessus, j'ai essayé plusieurs manipulations mais aucune ne marche quand j'essaye de mettre une icon avant le pseudo d'un groupe.
Comme ça :
https://reality-gaming.fr/attachments/etoile-png.36398/
Je compte sur votre aide, merci d'avance

 

[t ki JB_]

Quel(s) tutoriel(s) as-tu suivi(s) ?

 

[deleted577633]

https://reality-gaming.fr/threads/i...nforo-2-utilisation-des-font-awesomes.590830/

 

[t ki JB_]

https://reality-gaming.fr/threads/i...nforo-2-utilisation-des-font-awesomes.590830/

Dans ton CSS, il y a du BBCode.

De plus, l'image qu'il a mise sur son topic provient de ce tutoriel : https://reality-gaming.fr/threads/x...e-etoile-devant-le-grade-et-le-pseudo.359259/ et les deux tutoriels sont tous les deux "identiques" (hormis le BBCode ajouté par erreur sûrement ?) donc ça ne sert à rien de lui proposer ton tutoriel

 

[deleted577633]

Dans ton CSS, il y a du BBCode.

De plus, l'image qu'il a mise sur son topic provient de ce tutoriel : https://reality-gaming.fr/threads/x...e-etoile-devant-le-grade-et-le-pseudo.359259/ et les deux tutoriels sont tous les deux "identiques" (hormis le BBCode ajouté par erreur sûrement ?) donc ça ne sert à rien de lui proposer ton tutoriel

Tu croyais m'apprendre la vie toi

J'ai dit à Kévin ( le créateur du topic que t'as mis ) que je faisais un tutoriel plus simple à comprendre et plus récent avec une solution différente et il y a du BBCODE je peux pas le retirer les deux ne sont pas identiques lis les topics avant de parler pour rien stp

 

[t ki JB_]

Tu croyais m'apprendre la vie toi

J'ai dit à Kévin ( le créateur du topic que t'as mis ) que je faisais un tutoriel plus simple à comprendre et plus récent avec une solution différente et il y a du BBCODE je peux pas le retirer les deux ne sont pas identiques lis les topics avant de parler pour rien stp

Cela pourrait induire en erreur les utilisateurs mettant en pratique ton tutoriel, surtout pour les non-connaisseurs.

Les deux tutoriels sont bien faits, je ne vois aucun qui est plus simple que l'autre J'ai mis le mot entres guillemets, si c'est mal exprimé je m'en excuse, je parlais du code qui est identique.

 

[deleted577633]

Cela pourrait induire en erreur les utilisateurs mettant en pratique ton tutoriel, surtout pour les non-connaisseurs.

Les deux tutoriels sont bien faits, je ne vois aucun qui est plus simple que l'autre J'ai mis le mot entres guillemets, si c'est mal exprimé je m'en excuse, je parlais du code qui est identique.

Elle est plus rapide ^^

 

[UAE]

Bonjour à vous, j'ai un forum xenforo avec le thème #Rekt et je n'arrive pas à ajouter les Font Awesome dessus, j'ai essayé plusieurs manipulations mais aucune ne marche quand j'essaye de mettre une icon avant le pseudo d'un groupe.
Comme ça :
https://reality-gaming.fr/attachments/etoile-png.36398/
Je compte sur votre aide, merci d'avance

D'abord il faut savoir que le theme #rekt de Themehouse inclus par default

You must be registered for see images attach

Mais je vais refaire un Tutorial rapidement ici n cas si jamais un autre membre utilise un thème qui ne les inclus pas et veux ajouter une icone FA devant un groupe d'utilisateur :

Sur le Template page_container_js_head juste après :

<!--XenForo_Require:JS-->

Ajoute :

<script src="https://use.fontawesome.com/7309a7611d.js"></script>

Maintenant FontAwesome est ajouté au CSS.

Pour ajouter une icone FA devant un groupe, exemple les Admin soit par defaut GroupID =3
Sur le template EXTRA.CSS ajoute :

.username .style3:before {
    font-family: "FontAwesome";
    font-size: 90%;
    content: "\f27e";
    color: #F00;
    padding-right: 4px;
    display: inline-block;
}

Pour ajouter une animation de rotation lors du passage de la souris, ajoute sur EXTRA.CSS :

.username .style3:hover:before {
    display:inline-block;
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transition:all 0.35s;
    -webkit-transition:all 0.35s;
    -moz-transition:all 0.35s;
    -ms-transition:all 0.35s;
    -o-transition:all 0.35s
}