• info@locacreative.com
  • Lorsque l'on tient un site internet, il est important d'utiliser les réseaux sociaux comme outil complémentaire. Cela permet de créer une communauté et d'échanger avec ses lecteurs. Cela renforce d'autant plus votre site, puisque chaque publication pourra être partagée via ces différents réseaux. Pour inciter vos lecteurs à découvrir sur quels réseaux sociaux vous êtes actifs, il est judicieux de proposer au minimum de simples icônes afin de donner à vos lecteurs la possibilité de vous suivre.

     

    Dans la majeure partie des cas, les blogueuses utilisent des images en guise d'icônes. Cela peut être une bonne alternative, mais cela peut alourdir le site et parfois la qualité n'est pas toujours au rendez-vous. Pour maximiser les performances, nous allons plutôt utiliser le site Font Awesome. Il s'agit d'une bibliothèque recensant tous un tas d'icônes sous forme de police de caractères. Toutes les icônes sont personnalisables puisqu'elles sont sous forme vectorielle.

     

     

    Comment intégrer Font Awesome sur son blog?

    Pour pouvoir utiliser et afficher la police de caractères de Font Awesome, il va falloir l'intégrer à votre site. La manière d'utiliser Font Awesome sera différente si vous utilisez Blogger ou WordPress. Dans cet article, nous allons donc aborder chacune des plateformes.

    Font Awesome sur Blogger

    Installer Font Awesome sur Blogger

    Dans Blogger, nous allons intégrer cette police de caractère à l'intérieur du code CSS du blog.
    ➜ Dans votre code html, vous devez donc rechercher la balise fermante </head> et y insérez juste au-dessus le code suivant:
    <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
    
    ➜ Une fois ce code ajouté, enregistrez vos modifications.
    ✔︎ La "police d'écriture" Font Awesome est désormais reliée à votre blog. Vous pouvez désormais intégrer toutes les icônes présentes sur le site.

    Utiliser Font Awesome sur Blogger

     

    ➜ Tout d'abord, nous allons créer un gadget HTML/Javascript via Blogger. Nous allons donc aller dans la sidebar de gauche de l'interface Blogger, cliquer sur MISE EN PAGE, et AJOUTER UN GADGET, là où l'on souhaite mettre nos icônes. Nous allons choisir le gadget HTML/JAVASCRIPT.

     

     

    ➜ A l'intérieur de la nouvelle fenêtre, nous allons pouvoir y coller notre code ci-dessous. Dans ce code,vous trouverez les icônes de Facebook, Twitter, Pinterest et Instagram. Vous pourrez ajouter les icônes que vous désirez. Comme je vous le montre sur l'image ci-dessous.

     

     

     

    <div class="post-share">
    <ul>
    <li><a href="#" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
    <li><a href="#" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
    <li><a href="#" target="_blank"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
    <li><a href="#" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
    </ul>
    </div>

     

    Vous pouvez supprimez la ligne du réseau social dont vous n'avez pas besoin. (EX. <li><a href="#" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>). Même chose si vous souhaitez rajouter un réseaux social autre que ceux présenter ici.

     

    EX. pour ajouter Snapchat.Vous aurez donc à rajouter:

    <li><a href="#" target="_blank"><i class="fa fa-snapchat"></i></a></li>
    

     

     Enregistrez ensuite votre gadget.

    Personnaliser les icônes Font Awesome sur Blogger

     

    ➜ Vous pourriez simplement intégrer le code CSS juste après la balise fermante </div> de notre gadget html cité juste au-dessus (entre des balises <style> afin que votre code html comprenne qu'il s'agit de style css et non du code html).

    <style>
    .post-share ul {
        list-style: none;
    }
    .post-share ul li {
        color: #808080;
        padding-bottom: 3px;
        font-family: Karla, sans-serif;
        display: inline-block;
        margin-top: 5px;
    }
    .fa {
        display: inline-block;
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .post-share {
        float: left;
        width: 100%;
        padding-right: 20px;
        padding-left: 25px;
        margin: 0 auto;
        text-align: center;
    }
    .post-share .fa {
    font-size: 20px;
    padding: 0 5px 0 0;
    top: 1px;
    position: relative;
    color: #555;
    }
    </style>

     

    Font Awesome sur WordPress

    Installer Font Awesome sur WordPress.org

    ➜ Dans un premier temps, télécharger le dossier présent dans l'onglet "Get Started" sur le site de Font Awesome (lien ici).

     

    ➜ Utilisez votre client ftp (filezilla par exemple) afin d'accéder à votre hébergement.

     

    ➜ A l'intérieur de votre dossier thème, collez les dossiers téléchargés (CSS et FONTS uniquement). Si ces dossiers sont déjà présents dans votre hébergement, collez simplement le contenu dans chacun des dossiers existants.

     

    ➜ La dernière étape est d'ajouter dans votre fichier functions.php, juste avant la balise fermante ?> le code suivant:

     

    function NOMDEVOTREBLOG_files(){
    wp_enqueue_style('fontAwesome-style',get_template_directory_uri().'/css/font-awesome.min.css');

    }
    add_action('wp_enqueue_scripts','NOMDEVOTREBLOG_files');

    ✔︎ La "police d'écriture" Font Awesome est désormais reliée à votre site. Vous pouvez désormais intégrer toutes les icônes présentes sur le site.

    Utiliser Font Awesome sur WordPress.org

     

    ➜ Dirigez-vous dans la partie APPARENCES et sélectionnez WIDGETS.

     

     

    ➜ Déplacer un nouveau widget HTML personnalisé là où vous souhaitez qu'il apparaisse dans votre blog. Ensuite collez-y le code suivant à l'intérieur:

    <div class="post-share">
    <ul>
    <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
    <li><a href="#" target="_blank"><i class="fa fa-pinterest"></i></a></li>
    <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
    </ul>
    </div>
    
    

     

    ➜ Appuyez sur enregistrer.

    Personnaliser les icônes Font Awesome sur WordPress.org

     

    ➜ Il vous suffit simplement d'intégrer le code CSS dans le fichier ayant une extension .css. Le fichier en question est généralement appelé style.css et se trouve dans APPARENCE/EDITEUR.

    .post-share ul {
    list-style: none;
    }
    .post-share ul li {
    display: inline-block;  /* icônes alignées horizontalement */
    }
    .fa {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

    .post-share .fa {
    font-size: 1em;  /* taille des icônes */
    position: relative;
    color: #c1a58e; /* couleur des icônes */
    }

    apparence back office style.css

     

    ✔︎ Vos réseaux sociaux sont maintenant visibles! Si vous rencontre un soucis, n'hésitez pas à me laisser un commentaire.
    Vous êtes maintenant prêt à utiliser Font Awesome sur votre blog aussi bien sous Blogger que sur WordPress. N'hésitez pas à donner vos retours cela pourrait aider d'autres lecteurs ou de tout simplement aimer cet article.

    Un commentaire

    1. Merciiiiiiiiii pour ce partage <3
      Bisous

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *