Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Quoi de neuf
Nouveaux messages
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
Informatique
Développement
Initiation complète à xenForo | #2 Utilisation des Font Awesomes
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="deleted577633" data-source="post: 7057894"><p style="text-align: center"><span style="font-family: 'Questrial'"><span style="color: #404040"><img src="http://image.prntscr.com/image/8d9ba0986c7b4d50893874e496861010.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></span></p> <p style="text-align: center"><span style="font-family: 'Questrial'"><span style="color: #404040"></span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'">Bonjour à tous !</span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">On se retrouve aujourd'hui pour la deuxième partie qui va vous apprendre à débuter sur xenForo.</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">Pour cette deuxième partie, je vais vous apprendre à utiliser les Font Awesomes.</span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Merci à [USER=210410]@Kévin SEC[/USER] pour l'autorisation de refaire un topic sur les Font Awesomes. </span><a href="https://reality-gaming.fr/threads/xenforo-comment-ajouter-la-petite-etoile-devant-le-grade-et-le-pseudo.359259/" target="_blank"><span style="color: #0080ff">[fa]fa-link[/fa] Son topic</span></a><span style="color: #404040">.</span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #0080ff"><a href="https://reality-gaming.fr/posts/7056160/" target="_blank">[fa]fa-link[/fa] Si vous avez raté le premier épisode, la présentation des onglets.</a></span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Je ne vous apprendrai pas à créer les </span><span style="color: #0080ff">BBCodes</span><span style="color: #404040"> pour pouvoir les utiliser sur les topics ( </span><span style="color: #0080ff">[fa][/fa]</span><span style="color: #404040"> ).</span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'">Sommaire :</span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'Montserrat'"><span style="color: #0080ff">Activer les FontAwesomes sur votre forum.</span></span></p> <p style="text-align: center"><span style="font-family: 'Montserrat'"><span style="color: #0080ff">Mettre un FontAwesome devant le pseudo.</span></span></p> <p style="text-align: center"><span style="font-family: 'Montserrat'"><span style="color: #0080ff">Mettre un FontAwesome dans les bannières d'utilisateurs.</span></span></p> <p style="text-align: center"><span style="font-family: 'Montserrat'"><span style="color: #0080ff">Mettre un FontAwesome dans les préfixes de discussions.</span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Il faut savoir que ce tutoriel est un </span><span style="color: #0080ff">regroupement </span><span style="color: #404040">de plusieurs </span><span style="color: #0080ff">tutoriels</span><span style="color: #404040">, je ferais de mon mieux pour être le plus clair et le plus simple possible.</span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><img src="http://image.noelshack.com/fichiers/2015/25/1434466559-1434283967-sans-titre-3.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'Montserrat'"><span style="color: #0080ff"><strong>Activer les FontAwesomes sur votre forum</strong></span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Avant de pouvoir utiliser les </span><span style="color: #0080ff">FontAwesomes</span><span style="color: #404040">, il va falloir les activer sur votre forum, pour être plus précis c'est la libraire des icônes que l'on va mettre sur le forum.</span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">[USER=210410]@Kévin SEC[/USER] partait du principe que vous téléchargiez le</span><span style="color: #0080ff"> fichier CSS </span><span style="color: #404040">à mettre dans votre </span><span style="color: #0080ff">FTP</span><span style="color: #404040">, donc forcément le lien d'accès sera différent et cela peut poser problèmes aux novices ( vilain kévin ), je vais utilisé le lien de la libraire </span><span style="color: #0080ff">cloudfare </span><span style="color: #404040">pour ma part.</span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Allez dans votre panel d'administration puis rendez-vous dans les templates et cherchez </span><strong><span style="color: #0080ff">PAGE_CONTAINER.</span></strong></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Ajoutez ce lien dans l'</span><span style="color: #0080ff">en-tête</span><span style="color: #404040"> ( balises </span><span style="color: #0080ff"><head></span><span style="color: #404040"> )</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"></span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">[HTML]<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">[/HTML]</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"></span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">Une fois ceci fait, enregistrez la modification.</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"></span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #0080ff"><em>Voilà, vos FontAwesomes sont utilisables !</em></span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><img src="http://image.noelshack.com/fichiers/2015/25/1434466559-1434283967-sans-titre-3.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"></span></p> <p style="text-align: center"><strong><span style="font-family: 'Montserrat'"><span style="color: #0080ff">Mettre un FontAwesome devant le pseudo d'un utilisateur.</span></span></strong></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Vous allez avoir besoin de récupérer l</span><span style="color: #0080ff">'id </span><span style="color: #404040">du groupe d'utilisateurs où vous voulez mettre votre icône.</span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Pour ma part j'ai pris le grade "</span><span style="color: #0080ff">Ancien Staff</span><span style="color: #404040">".</span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">L'</span><span style="color: #0080ff">id</span><span style="color: #404040"> se situe dans l'</span><span style="color: #0080ff">URL</span><span style="color: #404040"> qui est constituée comme ceci :</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"></span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">[CODE]https://votreforum.fr/admin.php?user-groups/ancien-staff.11/[/CODE]</span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #0080ff">11</span><span style="color: #404040"> est l</span><span style="color: #0080ff">'id </span><span style="color: #404040">du grade "</span><span style="color: #0080ff">ancien staff</span><span style="color: #404040">".</span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Maintenant que vous l'id de votre groupe, vous retournez dans vos </span><span style="color: #0080ff">templates</span><span style="color: #404040">.</span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Rendez-vous dans le template </span><strong><span style="color: #0080ff">username_styles.css</span></strong><span style="color: #404040">.</span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #0080ff">Ajoutez</span><span style="color: #404040">-y ce code :</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"></span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">[CODE].username .style11:before {[/FONT][/COLOR][/CENTER]</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">[COLOR=#404040][FONT=MyriadPro Light]</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">[CENTER]</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">font-family: "FontAwesome";</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> content: "\f005";</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> color: #289bc1;</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> padding-right: 4px;</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> display: inline-block;</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">}</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"></span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">.username .style11:hover:before {</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> display: inline-block;</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -webkit-transform: rotate(360deg);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -moz-transform: rotate(360deg);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -o-transform: rotate(360deg);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -ms-transform: rotate(360deg);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -webkit-transform: rotate(360deg);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -ms-transform: rotate(360deg);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> transform: rotate(360deg);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -webkit-transform: rotate(360deg);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -moz-transform: rotate(360deg);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -ms-transform: rotate(360deg);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -o-transform: rotate(360deg);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> transition: all 0.35s;</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -webkit-transition: all 0.35s;</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -moz-transition: all 0.35s;</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -ms-transition: all 0.35s;</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -o-transition: all 0.35s</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">}</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">[/CODE]</span></span></p><p></p><p></p><p></p><p></p><p></p><p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><strong><span style="color: #0080ff">[fa]fa-edit[/fa] Explications</span></strong><span style="color: #404040"> : La première partie du code </span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">username.style11, on demande l'id du groupe définit par un " style ".</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'">:before c'est pour indiquer que le FA doit être placé avant le pseudo.</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'">Ensuite la demande vers la famille de police ( FontAwesome )</span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Le </span><span style="color: #0080ff">FontAwesome </span><span style="color: #404040">que l'on va utiliser ( </span><em><span style="color: #0080ff">content:"\f005"</span></em><span style="color: #404040"> ) qui est tout simplement cet FA : </span><span style="color: #0080ff">[fa]fa-star[/fa]</span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Puis la </span><span style="color: #0080ff">couleur </span><span style="color: #404040">et les </span><span style="color: #0080ff">positions </span><span style="color: #404040">de l'icône.</span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">La deuxième partie est tout simplement les actions que doit effectuer l'icône, ici c'est tout simplement une </span><span style="color: #0080ff">rotation à 360°</span><span style="color: #404040">.</span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Si vous voulez les actions effectuées par le </span><span style="color: #000000">[fa]fa-gavel[/fa]</span><span style="color: #404040"> du grade " </span><span style="color: #000000"><strong>Modérateur </strong></span><span style="color: #404040">" sur RealityGaming.</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">Voici le code :</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"></span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">[HTML].username .style11:before {[/FONT][/COLOR][/CENTER]</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">[COLOR=#404040][FONT=MyriadPro Light]</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">[CENTER]</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">font-family: "FontAwesome";</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> content: "\f0e3";</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> color: dark;</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> padding-right: 4px;</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> display: inline-block;</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">}</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">.username .style11:hover:before {</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> display: inline-block;</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> animation: shakeGavel 1.20s</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">}</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"></span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">@keyframes shakeGavel {</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> 0 {</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -webkit-transform: translate(0, 0) rotate(0);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -ms-transform: translate(0, 0) rotate(0);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> transform: translate(0, 0) rotate(0)</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> }</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"></span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> 20% {</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -webkit-transform: translate(-3px, 0) rotate(-25deg);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -ms-transform: translate(-3px, 0) rotate(-25deg);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> transform: translate(-3px, 0) rotate(-25deg)</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> }</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"></span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> 30% {</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -webkit-transform: translate(3px, 0) rotate(25deg);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -ms-transform: translate(3px, 0) rotate(25deg);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> transform: translate(3px, 0) rotate(25deg)</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> }</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"></span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> 50% {</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -webkit-transform: translate(-3px, 0) rotate(-15deg);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -ms-transform: translate(-3px, 0) rotate(-15deg);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> transform: translate(-3px, 0) rotate(-15deg)</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> }</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"></span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> 60% {</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -webkit-transform: translate(3px, 0) rotate(15deg);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -ms-transform: translate(3px, 0) rotate(15deg);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> transform: translate(3px, 0) rotate(15deg)</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> }</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"></span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> 100% {</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -webkit-transform: translate(0, 0) rotate(0);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> -ms-transform: translate(0, 0) rotate(0);</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> transform: translate(0, 0) rotate(0)</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> }</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">}[/HTML]</span></span></p><p></p><p></p><p></p><p></p><p></p><p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Mais comment savoir quel </span><span style="color: #0080ff">unicode </span><span style="color: #404040">correspond au FA que je veux ? </span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Imaginons que je veuille utiliser cet icône : </span><span style="color: #0080ff">[fa]fa-user-circle[/fa]</span><span style="color: #404040">.</span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Je me rends sur le lien pour l'obtenir ( </span><a href="http://fontawesome.io/icon/user-circle/" target="_blank"><span style="color: #0080ff">[fa]fa-link[/fa] ici</span></a><span style="color: #404040"> )</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"></span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"><img src="http://image.prntscr.com/image/def05933caec4610a4ffa351f6c4b5c5.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"></span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Vous pouvez voir "Unicode: </span><span style="color: #0080ff">f2bd</span><span style="color: #404040">" Rajoutez un "</span><span style="color: #0080ff">\</span><span style="color: #404040">" devant ce qui nous donne : "</span><span style="color: #0080ff">\f2bd</span><span style="color: #404040">" et voilà votre </span><span style="color: #0080ff">unicode</span><span style="color: #404040"> !</span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><img src="http://image.noelshack.com/fichiers/2015/25/1434466559-1434283967-sans-titre-3.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'Montserrat'"><span style="color: #0080ff"><strong>Mettre un FontAwesome dans les bannières d'utilisateurs</strong></span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Lorsque vous créez un </span><span style="color: #0080ff">groupe d'utilisateurs </span><span style="color: #404040">( grade ) il vous ait demander "</span><span style="color: #0080ff">Texte de la bannière utilisateur</span><span style="color: #404040">" avec </span><span style="color: #0080ff">différentes couleurs de bannières</span><span style="color: #404040"> à votre disposition.</span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><img src="http://image.prntscr.com/image/dda72eacd77f4f4cbd08bc886956a1ef.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Ici, mon grade est </span><span style="color: #0080ff">Super-Développeur</span><span style="color: #404040"> j'ai donc appelé ma </span><span style="color: #0080ff"><em>class CSS</em></span><span style="color: #404040"> "</span><strong><span style="color: #0080ff">userBanner bannerSupDev</span></strong><span style="color: #404040">"</span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Ok t'es gentil mais pour la suite, le </span><span style="color: #0080ff">CSS </span><span style="color: #404040">ne se met pas comme ça ?</span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Non, il faut aller dans les </span><span style="color: #0080ff">templates</span><span style="color: #404040">, dans le template </span><strong><span style="color: #0080ff">user_banners.css</span></strong><span style="color: #404040"> plus précisément.</span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Vous voyez déjà les </span><span style="color: #0080ff">class CSS</span><span style="color: #404040"> des bannières par défaut.</span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="font-size: 12px"><span style="color: #0080ff">( Petit bonus, cette partie vous montre comment mettre des couleurs différentes que celles proposées, c'est cadeau )</span></span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Donc pour ma bannière je veux une </span><span style="color: #0080ff">couleur de texte blanche</span><span style="color: #404040">, un FA ( </span><span style="color: #b30000">[fa]fa-terminal[/fa]</span><span style="color: #404040"> ) en blanc également.</span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Un </span><span style="color: #0080ff">background </span><span style="color: #404040">de cette </span><span style="color: rgb(167, 0, 0)"><strong>couleur</strong></span><span style="color: #404040">.</span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Pour la modification </span><span style="color: #0080ff">sans </span><span style="color: #404040">le FA je vais y placer ce code :</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"></span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">[CODE].bannerSupDev {[/FONT][/COLOR][/CENTER]</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">[COLOR=#404040][FONT=MyriadPro Light]</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">[CENTER]</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">color: white !important;</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> background-color: #A70000 !important;</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">}[/CODE]</span></span></p><p></p><p></p><p></p><p></p><p></p><p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Explications : </span><span style="color: #0080ff"> .bannerSupDev</span><span style="color: #404040">, c'est le nom de la </span><span style="color: #0080ff">class CSS</span><span style="color: #404040"> que j'ai utilisé tout à l'heure</span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Ensuite je vais </span><span style="color: #0080ff">rajouter mon FA</span><span style="color: #404040"> de couleur blanche</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"></span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">[HTML].bannerSupDev:before {[/FONT][/COLOR][/CENTER]</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">[COLOR=#404040][FONT=MyriadPro Light]</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">[CENTER]</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">content: "\f120";</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> font-family: FontAwesome;</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> padding-right: 4px;</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'"> color: white;</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">}[/HTML]</span></span></p><p></p><p></p><p></p><p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><strong><span style="color: #0080ff">[fa]fa-edit[/fa] Explications</span></strong><span style="color: #404040"> : </span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #0080ff">:before</span><span style="color: #404040"> me sert à indiquer que le FA doit être placé avant le texte ( comme tout à l'heure )</span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #0080ff">font-family</span><span style="color: #404040"> : toujours la même famille de police,</span><span style="color: #0080ff"> FontAwesome</span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Vous pouvez tout à fait donner des </span><span style="color: #0080ff">animations</span><span style="color: #404040">, cela fonctionnera parfaitement.</span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Maintenant à vous de définir vos propres icônes, couleurs, </span><span style="color: #0080ff">class CSS</span><span style="color: #404040"> etc ...</span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><img src="http://image.noelshack.com/fichiers/2015/25/1434466559-1434283967-sans-titre-3.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'Montserrat'"><span style="color: #0080ff"><strong>Mettre un FontAwesome dans les préfixes de discussions</strong></span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Maintenant direction </span><span style="color: #0080ff">application</span><span style="color: #404040"> -> </span><span style="color: #0080ff">Préfixes de discussion</span><span style="color: #404040">. </span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">En créant votre préfixe, il vous sera demandé exactement comme dans la partie précédente, une utilisation autre avec une </span><span style="color: #0080ff">class CSS</span><span style="color: #404040">, vous allez cocher cette case, j'ai pris le préfixe "</span><span style="color: #0080ff">Astuce</span><span style="color: #404040">" pour ma part donc je vais utilisé ce code :</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">[HTML]prefix prefixAstuce[/HTML]</span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Maintenant nous allons dans le template </span><strong><span style="color: #0080ff">EXTRA.css</span></strong><span style="color: #404040"> ou</span><span style="color: #0080ff"><strong> thread_prefixes.css</strong></span><span style="color: #404040"> comme vous voulez.</span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="font-size: 12px"><span style="color: #0080ff">[fa]fa-edit[/fa] Note</span><span style="color: #404040"> : EXTRA.css peut contenir toutes les modifications CSS de votre forum.</span></span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Je veux mettre cette </span><span style="color: rgb(4, 79, 103)">couleur</span><span style="color: #404040"> en </span><span style="color: #0080ff">background </span><span style="color: #404040">et un </span><span style="color: #0080ff">texte blanc</span><span style="color: #404040">, un petit </span><span style="color: #0080ff">effet d'ombre</span><span style="color: #404040"> et un </span><span style="color: #0080ff">texte en gras</span><span style="color: #404040">.</span></span></p> <p style="text-align: center"><span style="color: #404040"><span style="font-family: 'MyriadPro Light'">Je vais donc ajouté ce code :</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'">[CODE].prefixAstuce {[/FONT][/COLOR][/CENTER]</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'">[COLOR=rgb(64, 64, 64)][FONT=MyriadPro Light]</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'">[CENTER] color: white;</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'"> background-color: #044F67;</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'"> background-repeat: repeat-x;</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'"> background-image: none;</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'"> background-position: bottom;</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'"> border-radius: 3px;</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'"> border: 1px solid rgba(0,0,0, 0.15) !important;</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'"> box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1) inset, 1px 1px 2px rgba(0,0,0,0.1);</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'"> font-size: 12px;</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'"> font-weight: bold;</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'"> }[/CODE]</span></span></p><p></p><p></p><p></p><p></p><p></p><p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><strong><span style="color: #0080ff">[fa]fa-edit[/fa] Explications</span></strong><span style="color: #404040"> : </span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #0080ff">.prefixAstuce</span><span style="color: #404040">, je demande à modifier la </span><span style="color: #0080ff">class CSS</span><span style="color: #404040"> que j'ai rentré tout à l'heure.</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'">box-shadow, il s'agit de mon effet d'ombre</span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #0080ff">font-weight: bold; </span><span style="color: #404040">c'est pour donner de l'épaisseur à mon texte ( le mettre en gras ) à l'inverse pour affiner mon texte j'utiliserais plutôt </span><span style="color: #0080ff">font-weight: !important</span><span style="color: #404040">.</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'"></span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'">Maintenant je veux ajouter ce FA : [fa]fa-lightbulb-o[/fa] avec une couleur blanche.</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'">Je vais donc ajouté ceci :</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'">[HTML].prefixAstuce:before {[/FONT][/COLOR][/CENTER]</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'">[COLOR=rgb(64, 64, 64)][FONT=MyriadPro Light]</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'">[CENTER]</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'">font-family: "FontAwesome";</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'"> content: "\f0eb</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'"> margin-right: 4px;</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'"> font-size: 80%;</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'"> color: white;</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'">}[/HTML]</span></span></p><p></p><p></p><p></p><p></p><p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><strong><span style="color: #0080ff">[fa]fa-edit[/fa] Explications</span></strong><span style="color: #404040"> : </span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #0080ff">:before</span><span style="color: #404040">, comme toujours pour indiquer que l'icône doit se trouver avant le texte.</span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #0080ff">font-family</span><span style="color: #404040">, on utilise toujours les </span><span style="color: #0080ff">FontAwesomes</span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">content: , je rajoute </span><span style="color: #0080ff">l'unicode </span><span style="color: #404040">de mon FA.</span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Vous pouvez aussi ajouter des </span><span style="color: #0080ff">animations CSS</span><span style="color: #404040"> !</span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><img src="http://image.noelshack.com/fichiers/2015/25/1434466559-1434283967-sans-titre-3.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="color: #404040">Voilà c'est la fin de la deuxième partie "</span><span style="color: #0080ff">Initiation à xenForo</span><span style="color: #404040">" j'espère que celle-ci vous aura plus <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite400" alt="::):" title="Smile ::):" loading="lazy" data-shortname="::):" /></span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'">N'hésitez-pas à laisser vos avis dans les commentaires, si je suis assez explicite etc ..</span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'"></span></span></p> <p style="text-align: center"><span style="color: rgb(64, 64, 64)"><span style="font-family: 'MyriadPro Light'">Bonne journée,</span></span></p> <p style="text-align: center"><em><strong><span style="color: rgb(255, 128, 0)"><span style="font-family: 'MyriadPro Light'">Shine's GTP</span></span></strong></em></p> <p style="text-align: center"><span style="font-family: 'Questrial'"></span></p> <p style="text-align: center"><span style="font-family: 'Questrial'"></span></p></blockquote><p></p>
[QUOTE="deleted577633, post: 7057894"] [CENTER][FONT=Questrial][COLOR=#404040][IMG]http://image.prntscr.com/image/8d9ba0986c7b4d50893874e496861010.png[/IMG] [/COLOR][/FONT] [COLOR=rgb(64, 64, 64)][FONT=MyriadPro Light]Bonjour à tous ![/FONT][/COLOR] [COLOR=#404040][FONT=MyriadPro Light]On se retrouve aujourd'hui pour la deuxième partie qui va vous apprendre à débuter sur xenForo. Pour cette deuxième partie, je vais vous apprendre à utiliser les Font Awesomes.[/FONT][/COLOR] [FONT=MyriadPro Light][COLOR=#404040]Merci à [USER=210410]@Kévin SEC[/USER] pour l'autorisation de refaire un topic sur les Font Awesomes. [/COLOR][URL='https://reality-gaming.fr/threads/xenforo-comment-ajouter-la-petite-etoile-devant-le-grade-et-le-pseudo.359259/'][COLOR=#0080ff][fa]fa-link[/fa] Son topic[/COLOR][/URL][COLOR=#404040].[/COLOR][/FONT] [FONT=MyriadPro Light][COLOR=#0080ff][URL='https://reality-gaming.fr/posts/7056160/'][fa]fa-link[/fa] Si vous avez raté le premier épisode, la présentation des onglets.[/URL][/COLOR][/FONT] [FONT=MyriadPro Light][COLOR=#404040]Je ne vous apprendrai pas à créer les [/COLOR][COLOR=#0080ff]BBCodes[/COLOR][COLOR=#404040] pour pouvoir les utiliser sur les topics ( [/COLOR][COLOR=#0080ff][fa][/fa][/COLOR][COLOR=#404040] ).[/COLOR][/FONT] [COLOR=rgb(64, 64, 64)][FONT=MyriadPro Light]Sommaire :[/FONT][/COLOR] [FONT=Montserrat][COLOR=#0080ff]Activer les FontAwesomes sur votre forum. Mettre un FontAwesome devant le pseudo. Mettre un FontAwesome dans les bannières d'utilisateurs. Mettre un FontAwesome dans les préfixes de discussions.[/COLOR][/FONT] [FONT=MyriadPro Light][COLOR=#404040]Il faut savoir que ce tutoriel est un [/COLOR][COLOR=#0080ff]regroupement [/COLOR][COLOR=#404040]de plusieurs [/COLOR][COLOR=#0080ff]tutoriels[/COLOR][COLOR=#404040], je ferais de mon mieux pour être le plus clair et le plus simple possible.[/COLOR][/FONT] [FONT=MyriadPro Light][IMG]http://image.noelshack.com/fichiers/2015/25/1434466559-1434283967-sans-titre-3.png[/IMG] [/FONT] [FONT=Montserrat][COLOR=#0080ff][B]Activer les FontAwesomes sur votre forum[/B][/COLOR][/FONT] [FONT=MyriadPro Light][COLOR=#404040]Avant de pouvoir utiliser les [/COLOR][COLOR=#0080ff]FontAwesomes[/COLOR][COLOR=#404040], il va falloir les activer sur votre forum, pour être plus précis c'est la libraire des icônes que l'on va mettre sur le forum. [USER=210410]@Kévin SEC[/USER] partait du principe que vous téléchargiez le[/COLOR][COLOR=#0080ff] fichier CSS [/COLOR][COLOR=#404040]à mettre dans votre [/COLOR][COLOR=#0080ff]FTP[/COLOR][COLOR=#404040], donc forcément le lien d'accès sera différent et cela peut poser problèmes aux novices ( vilain kévin ), je vais utilisé le lien de la libraire [/COLOR][COLOR=#0080ff]cloudfare [/COLOR][COLOR=#404040]pour ma part.[/COLOR][/FONT] [FONT=MyriadPro Light][COLOR=#404040]Allez dans votre panel d'administration puis rendez-vous dans les templates et cherchez [/COLOR][B][COLOR=#0080ff]PAGE_CONTAINER.[/COLOR][/B] [COLOR=#404040]Ajoutez ce lien dans l'[/COLOR][COLOR=#0080ff]en-tête[/COLOR][COLOR=#404040] ( balises [/COLOR][COLOR=#0080ff]<head>[/COLOR][COLOR=#404040] )[/COLOR][/FONT] [COLOR=#404040][FONT=MyriadPro Light] [HTML]<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">[/HTML] Une fois ceci fait, enregistrez la modification. [/FONT][/COLOR] [FONT=MyriadPro Light][COLOR=#0080ff][I]Voilà, vos FontAwesomes sont utilisables ![/I][/COLOR][/FONT] [FONT=MyriadPro Light][IMG]http://image.noelshack.com/fichiers/2015/25/1434466559-1434283967-sans-titre-3.png[/IMG] [/FONT] [B][FONT=Montserrat][COLOR=#0080ff]Mettre un FontAwesome devant le pseudo d'un utilisateur.[/COLOR][/FONT][/B] [FONT=MyriadPro Light][COLOR=#404040]Vous allez avoir besoin de récupérer l[/COLOR][COLOR=#0080ff]'id [/COLOR][COLOR=#404040]du groupe d'utilisateurs où vous voulez mettre votre icône. Pour ma part j'ai pris le grade "[/COLOR][COLOR=#0080ff]Ancien Staff[/COLOR][COLOR=#404040]".[/COLOR][/FONT] [FONT=MyriadPro Light][COLOR=#404040]L'[/COLOR][COLOR=#0080ff]id[/COLOR][COLOR=#404040] se situe dans l'[/COLOR][COLOR=#0080ff]URL[/COLOR][COLOR=#404040] qui est constituée comme ceci :[/COLOR][/FONT] [COLOR=#404040][FONT=MyriadPro Light] [CODE]https://votreforum.fr/admin.php?user-groups/ancien-staff.11/[/CODE][/FONT][/COLOR] [FONT=MyriadPro Light][COLOR=#0080ff]11[/COLOR][COLOR=#404040] est l[/COLOR][COLOR=#0080ff]'id [/COLOR][COLOR=#404040]du grade "[/COLOR][COLOR=#0080ff]ancien staff[/COLOR][COLOR=#404040]".[/COLOR][/FONT] [FONT=MyriadPro Light][COLOR=#404040]Maintenant que vous l'id de votre groupe, vous retournez dans vos [/COLOR][COLOR=#0080ff]templates[/COLOR][COLOR=#404040]. Rendez-vous dans le template [/COLOR][B][COLOR=#0080ff]username_styles.css[/COLOR][/B][COLOR=#404040].[/COLOR][/FONT] [FONT=MyriadPro Light][COLOR=#0080ff]Ajoutez[/COLOR][COLOR=#404040]-y ce code :[/COLOR][/FONT] [COLOR=#404040][FONT=MyriadPro Light] [CODE].username .style11:before {[/FONT][/COLOR][/CENTER] [COLOR=#404040][FONT=MyriadPro Light] [CENTER] font-family: "FontAwesome"; content: "\f005"; color: #289bc1; padding-right: 4px; display: inline-block; } .username .style11:hover:before { display: inline-block; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-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 } [/CODE][/FONT][/COLOR][/CENTER][COLOR=#404040][FONT=MyriadPro Light][/FONT][/COLOR] [CENTER][FONT=MyriadPro Light][B][COLOR=#0080ff][fa]fa-edit[/fa] Explications[/COLOR][/B][COLOR=#404040] : La première partie du code [/COLOR][/FONT] [COLOR=#404040][FONT=MyriadPro Light]username.style11, on demande l'id du groupe définit par un " style ".[/FONT][/COLOR] [COLOR=rgb(64, 64, 64)][FONT=MyriadPro Light]:before c'est pour indiquer que le FA doit être placé avant le pseudo. Ensuite la demande vers la famille de police ( FontAwesome )[/FONT][/COLOR] [FONT=MyriadPro Light][COLOR=#404040]Le [/COLOR][COLOR=#0080ff]FontAwesome [/COLOR][COLOR=#404040]que l'on va utiliser ( [/COLOR][I][COLOR=#0080ff]content:"\f005"[/COLOR][/I][COLOR=#404040] ) qui est tout simplement cet FA : [/COLOR][COLOR=#0080ff][fa]fa-star[/fa][/COLOR] [COLOR=#404040]Puis la [/COLOR][COLOR=#0080ff]couleur [/COLOR][COLOR=#404040]et les [/COLOR][COLOR=#0080ff]positions [/COLOR][COLOR=#404040]de l'icône.[/COLOR][/FONT] [FONT=MyriadPro Light][COLOR=#404040]La deuxième partie est tout simplement les actions que doit effectuer l'icône, ici c'est tout simplement une [/COLOR][COLOR=#0080ff]rotation à 360°[/COLOR][COLOR=#404040]. Si vous voulez les actions effectuées par le [/COLOR][COLOR=#000000][fa]fa-gavel[/fa][/COLOR][COLOR=#404040] du grade " [/COLOR][COLOR=#000000][B]Modérateur [/B][/COLOR][COLOR=#404040]" sur RealityGaming.[/COLOR][/FONT] [COLOR=#404040][FONT=MyriadPro Light]Voici le code : [HTML].username .style11:before {[/FONT][/COLOR][/CENTER] [COLOR=#404040][FONT=MyriadPro Light] [CENTER] font-family: "FontAwesome"; content: "\f0e3"; color: dark; padding-right: 4px; display: inline-block; } .username .style11:hover:before { display: inline-block; animation: shakeGavel 1.20s } @keyframes shakeGavel { 0 { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0) } 20% { -webkit-transform: translate(-3px, 0) rotate(-25deg); -ms-transform: translate(-3px, 0) rotate(-25deg); transform: translate(-3px, 0) rotate(-25deg) } 30% { -webkit-transform: translate(3px, 0) rotate(25deg); -ms-transform: translate(3px, 0) rotate(25deg); transform: translate(3px, 0) rotate(25deg) } 50% { -webkit-transform: translate(-3px, 0) rotate(-15deg); -ms-transform: translate(-3px, 0) rotate(-15deg); transform: translate(-3px, 0) rotate(-15deg) } 60% { -webkit-transform: translate(3px, 0) rotate(15deg); -ms-transform: translate(3px, 0) rotate(15deg); transform: translate(3px, 0) rotate(15deg) } 100% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0) } }[/HTML][/FONT][/COLOR][/CENTER][COLOR=#404040][FONT=MyriadPro Light][/FONT][/COLOR] [CENTER][FONT=MyriadPro Light][COLOR=#404040]Mais comment savoir quel [/COLOR][COLOR=#0080ff]unicode [/COLOR][COLOR=#404040]correspond au FA que je veux ? Imaginons que je veuille utiliser cet icône : [/COLOR][COLOR=#0080ff][fa]fa-user-circle[/fa][/COLOR][COLOR=#404040].[/COLOR][/FONT] [FONT=MyriadPro Light][COLOR=#404040]Je me rends sur le lien pour l'obtenir ( [/COLOR][URL='http://fontawesome.io/icon/user-circle/'][COLOR=#0080ff][fa]fa-link[/fa] ici[/COLOR][/URL][COLOR=#404040] )[/COLOR][/FONT] [COLOR=#404040][FONT=MyriadPro Light] [IMG]http://image.prntscr.com/image/def05933caec4610a4ffa351f6c4b5c5.png[/IMG] [/FONT][/COLOR] [FONT=MyriadPro Light][COLOR=#404040]Vous pouvez voir "Unicode: [/COLOR][COLOR=#0080ff]f2bd[/COLOR][COLOR=#404040]" Rajoutez un "[/COLOR][COLOR=#0080ff]\[/COLOR][COLOR=#404040]" devant ce qui nous donne : "[/COLOR][COLOR=#0080ff]\f2bd[/COLOR][COLOR=#404040]" et voilà votre [/COLOR][COLOR=#0080ff]unicode[/COLOR][COLOR=#404040] ![/COLOR] [IMG]http://image.noelshack.com/fichiers/2015/25/1434466559-1434283967-sans-titre-3.png[/IMG] [/FONT] [FONT=Montserrat][COLOR=#0080ff][B]Mettre un FontAwesome dans les bannières d'utilisateurs[/B][/COLOR][/FONT] [FONT=MyriadPro Light][COLOR=#404040]Lorsque vous créez un [/COLOR][COLOR=#0080ff]groupe d'utilisateurs [/COLOR][COLOR=#404040]( grade ) il vous ait demander "[/COLOR][COLOR=#0080ff]Texte de la bannière utilisateur[/COLOR][COLOR=#404040]" avec [/COLOR][COLOR=#0080ff]différentes couleurs de bannières[/COLOR][COLOR=#404040] à votre disposition.[/COLOR] [IMG]http://image.prntscr.com/image/dda72eacd77f4f4cbd08bc886956a1ef.png[/IMG] [COLOR=#404040]Ici, mon grade est [/COLOR][COLOR=#0080ff]Super-Développeur[/COLOR][COLOR=#404040] j'ai donc appelé ma [/COLOR][COLOR=#0080ff][I]class CSS[/I][/COLOR][COLOR=#404040] "[/COLOR][B][COLOR=#0080ff]userBanner bannerSupDev[/COLOR][/B][COLOR=#404040]" Ok t'es gentil mais pour la suite, le [/COLOR][COLOR=#0080ff]CSS [/COLOR][COLOR=#404040]ne se met pas comme ça ? Non, il faut aller dans les [/COLOR][COLOR=#0080ff]templates[/COLOR][COLOR=#404040], dans le template [/COLOR][B][COLOR=#0080ff]user_banners.css[/COLOR][/B][COLOR=#404040] plus précisément.[/COLOR][/FONT] [FONT=MyriadPro Light][COLOR=#404040]Vous voyez déjà les [/COLOR][COLOR=#0080ff]class CSS[/COLOR][COLOR=#404040] des bannières par défaut.[/COLOR] [SIZE=3][COLOR=#0080ff]( Petit bonus, cette partie vous montre comment mettre des couleurs différentes que celles proposées, c'est cadeau )[/COLOR][/SIZE] [COLOR=#404040]Donc pour ma bannière je veux une [/COLOR][COLOR=#0080ff]couleur de texte blanche[/COLOR][COLOR=#404040], un FA ( [/COLOR][COLOR=#b30000][fa]fa-terminal[/fa][/COLOR][COLOR=#404040] ) en blanc également. Un [/COLOR][COLOR=#0080ff]background [/COLOR][COLOR=#404040]de cette [/COLOR][COLOR=rgb(167, 0, 0)][B]couleur[/B][/COLOR][COLOR=#404040].[/COLOR][/FONT] [FONT=MyriadPro Light][COLOR=#404040]Pour la modification [/COLOR][COLOR=#0080ff]sans [/COLOR][COLOR=#404040]le FA je vais y placer ce code :[/COLOR][/FONT] [COLOR=#404040][FONT=MyriadPro Light] [CODE].bannerSupDev {[/FONT][/COLOR][/CENTER] [COLOR=#404040][FONT=MyriadPro Light] [CENTER] color: white !important; background-color: #A70000 !important; }[/CODE][/FONT][/COLOR][/CENTER][COLOR=#404040][FONT=MyriadPro Light][/FONT][/COLOR] [CENTER][FONT=MyriadPro Light][COLOR=#404040]Explications : [/COLOR][COLOR=#0080ff] .bannerSupDev[/COLOR][COLOR=#404040], c'est le nom de la [/COLOR][COLOR=#0080ff]class CSS[/COLOR][COLOR=#404040] que j'ai utilisé tout à l'heure[/COLOR][/FONT] [FONT=MyriadPro Light][COLOR=#404040]Ensuite je vais [/COLOR][COLOR=#0080ff]rajouter mon FA[/COLOR][COLOR=#404040] de couleur blanche[/COLOR][/FONT] [COLOR=#404040][FONT=MyriadPro Light] [HTML].bannerSupDev:before {[/FONT][/COLOR][/CENTER] [COLOR=#404040][FONT=MyriadPro Light] [CENTER] content: "\f120"; font-family: FontAwesome; padding-right: 4px; color: white; }[/HTML][/FONT][/COLOR][/CENTER][COLOR=#404040][FONT=MyriadPro Light][/FONT][/COLOR] [CENTER][FONT=MyriadPro Light][B][COLOR=#0080ff][fa]fa-edit[/fa] Explications[/COLOR][/B][COLOR=#404040] : [/COLOR] [COLOR=#0080ff]:before[/COLOR][COLOR=#404040] me sert à indiquer que le FA doit être placé avant le texte ( comme tout à l'heure )[/COLOR] [COLOR=#0080ff]font-family[/COLOR][COLOR=#404040] : toujours la même famille de police,[/COLOR][COLOR=#0080ff] FontAwesome[/COLOR] [COLOR=#404040]Vous pouvez tout à fait donner des [/COLOR][COLOR=#0080ff]animations[/COLOR][COLOR=#404040], cela fonctionnera parfaitement.[/COLOR][/FONT] [FONT=MyriadPro Light][COLOR=#404040]Maintenant à vous de définir vos propres icônes, couleurs, [/COLOR][COLOR=#0080ff]class CSS[/COLOR][COLOR=#404040] etc ...[/COLOR][/FONT] [FONT=MyriadPro Light][IMG]http://image.noelshack.com/fichiers/2015/25/1434466559-1434283967-sans-titre-3.png[/IMG] [/FONT] [FONT=Montserrat][COLOR=#0080ff][B]Mettre un FontAwesome dans les préfixes de discussions[/B][/COLOR][/FONT] [FONT=MyriadPro Light][COLOR=#404040]Maintenant direction [/COLOR][COLOR=#0080ff]application[/COLOR][COLOR=#404040] -> [/COLOR][COLOR=#0080ff]Préfixes de discussion[/COLOR][COLOR=#404040]. En créant votre préfixe, il vous sera demandé exactement comme dans la partie précédente, une utilisation autre avec une [/COLOR][COLOR=#0080ff]class CSS[/COLOR][COLOR=#404040], vous allez cocher cette case, j'ai pris le préfixe "[/COLOR][COLOR=#0080ff]Astuce[/COLOR][COLOR=#404040]" pour ma part donc je vais utilisé ce code :[/COLOR][/FONT] [COLOR=#404040][FONT=MyriadPro Light][HTML]prefix prefixAstuce[/HTML][/FONT][/COLOR] [FONT=MyriadPro Light][COLOR=#404040]Maintenant nous allons dans le template [/COLOR][B][COLOR=#0080ff]EXTRA.css[/COLOR][/B][COLOR=#404040] ou[/COLOR][COLOR=#0080ff][B] thread_prefixes.css[/B][/COLOR][COLOR=#404040] comme vous voulez.[/COLOR] [SIZE=3][COLOR=#0080ff][fa]fa-edit[/fa] Note[/COLOR][COLOR=#404040] : EXTRA.css peut contenir toutes les modifications CSS de votre forum.[/COLOR][/SIZE][/FONT] [FONT=MyriadPro Light][COLOR=#404040]Je veux mettre cette [/COLOR][COLOR=rgb(4, 79, 103)]couleur[/COLOR][COLOR=#404040] en [/COLOR][COLOR=#0080ff]background [/COLOR][COLOR=#404040]et un [/COLOR][COLOR=#0080ff]texte blanc[/COLOR][COLOR=#404040], un petit [/COLOR][COLOR=#0080ff]effet d'ombre[/COLOR][COLOR=#404040] et un [/COLOR][COLOR=#0080ff]texte en gras[/COLOR][COLOR=#404040].[/COLOR][/FONT] [COLOR=#404040][FONT=MyriadPro Light]Je vais donc ajouté ce code :[/FONT][/COLOR] [COLOR=rgb(64, 64, 64)][FONT=MyriadPro Light][CODE].prefixAstuce {[/FONT][/COLOR][/CENTER] [COLOR=rgb(64, 64, 64)][FONT=MyriadPro Light] [CENTER] color: white; background-color: #044F67; background-repeat: repeat-x; background-image: none; background-position: bottom; border-radius: 3px; border: 1px solid rgba(0,0,0, 0.15) !important; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1) inset, 1px 1px 2px rgba(0,0,0,0.1); font-size: 12px; font-weight: bold; }[/CODE][/FONT][/COLOR][/CENTER][COLOR=rgb(64, 64, 64)][FONT=MyriadPro Light][/FONT][/COLOR] [CENTER][FONT=MyriadPro Light][B][COLOR=#0080ff][fa]fa-edit[/fa] Explications[/COLOR][/B][COLOR=#404040] : [/COLOR] [COLOR=#0080ff].prefixAstuce[/COLOR][COLOR=#404040], je demande à modifier la [/COLOR][COLOR=#0080ff]class CSS[/COLOR][COLOR=#404040] que j'ai rentré tout à l'heure.[/COLOR][/FONT] [COLOR=rgb(64, 64, 64)][FONT=MyriadPro Light]box-shadow, il s'agit de mon effet d'ombre[/FONT][/COLOR] [FONT=MyriadPro Light][COLOR=#0080ff]font-weight: bold; [/COLOR][COLOR=#404040]c'est pour donner de l'épaisseur à mon texte ( le mettre en gras ) à l'inverse pour affiner mon texte j'utiliserais plutôt [/COLOR][COLOR=#0080ff]font-weight: !important[/COLOR][COLOR=#404040].[/COLOR][/FONT] [COLOR=rgb(64, 64, 64)][FONT=MyriadPro Light] Maintenant je veux ajouter ce FA : [fa]fa-lightbulb-o[/fa] avec une couleur blanche. Je vais donc ajouté ceci : [HTML].prefixAstuce:before {[/FONT][/COLOR][/CENTER] [COLOR=rgb(64, 64, 64)][FONT=MyriadPro Light] [CENTER] font-family: "FontAwesome"; content: "\f0eb margin-right: 4px; font-size: 80%; color: white; }[/HTML][/FONT][/COLOR][/CENTER][COLOR=rgb(64, 64, 64)][FONT=MyriadPro Light][/FONT][/COLOR] [CENTER][FONT=MyriadPro Light][B][COLOR=#0080ff][fa]fa-edit[/fa] Explications[/COLOR][/B][COLOR=#404040] : [/COLOR] [COLOR=#0080ff]:before[/COLOR][COLOR=#404040], comme toujours pour indiquer que l'icône doit se trouver avant le texte.[/COLOR] [COLOR=#0080ff]font-family[/COLOR][COLOR=#404040], on utilise toujours les [/COLOR][COLOR=#0080ff]FontAwesomes[/COLOR] [COLOR=#404040]content: , je rajoute [/COLOR][COLOR=#0080ff]l'unicode [/COLOR][COLOR=#404040]de mon FA. Vous pouvez aussi ajouter des [/COLOR][COLOR=#0080ff]animations CSS[/COLOR][COLOR=#404040] ![/COLOR][/FONT] [FONT=MyriadPro Light][IMG]http://image.noelshack.com/fichiers/2015/25/1434466559-1434283967-sans-titre-3.png[/IMG] [/FONT] [FONT=MyriadPro Light][COLOR=#404040]Voilà c'est la fin de la deuxième partie "[/COLOR][COLOR=#0080ff]Initiation à xenForo[/COLOR][COLOR=#404040]" j'espère que celle-ci vous aura plus ::):[/COLOR][/FONT] [COLOR=rgb(64, 64, 64)][FONT=MyriadPro Light]N'hésitez-pas à laisser vos avis dans les commentaires, si je suis assez explicite etc .. Bonne journée,[/FONT][/COLOR] [I][B][COLOR=rgb(255, 128, 0)][FONT=MyriadPro Light]Shine's GTP[/FONT][/COLOR][/B][/I] [FONT=Questrial] [/FONT][/CENTER] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Informatique
Développement
Initiation complète à xenForo | #2 Utilisation des Font Awesomes
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut