ANNONCE [XenForo] "Font Awesome" icon à coter des pseudos

Discussion dans 'Technique' créé par SAהKA, 11 Février 2019.

  1. SAהKA

    SAהKA Fondateur / Leader Membre du personnel Fondateur / Leader

    Inscrit:
    23 Janvier 2019
    Messages:
    15
    J'aime reçus:
    0
    Sexe:
    Homme
    Occupation:
    Fondateur de JJC RADIO et JJC GROUP
    Localité:
    Orléans - Centre-Val-de Loire
    Site web:
    Salut upload_2019-2-11_17-25-47.gif

    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.

    [​IMG]


    [​IMG]
    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 :
    Code:
    <link rel="stylesheet" href="font-awesome-4.1.0/css/font-awesome.min.css">
    Sauvegarder et revenez en arrière.

    [​IMG]


    [​IMG]
    Maintenant, recherchez la Template "EXTRA.css", et ouvrez la.

    Ajoutez y se code :

    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);
    }
    [​IMG]
    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.

    [​IMG]
    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"

    [​IMG]
    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 :

    Code:
    Code:
    -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 :

    Code:
    -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 upload_2019-2-11_17-25-47.gif

    Pour toutes questions ou demande d'aide, n'hésitez pas à venir ici :​
     

Partager cette page

Share