Batch Index du Forum
S’enregistrerRechercherFAQMembresGroupesConnexion
Répondre au sujet Page 1 sur 1
Remplacer le texte des liens par des icones
Auteur Message
Répondre en citant
Message Remplacer le texte des liens par des icones 
Bonjour à tous,

Allez, ayant appris pas mal de truc ces dernières semaines (avec un remerciement tout particulier pour flammrock ), je viens partager à mon tour.
Je vais commencer par quelque chose de simple mais sympa: ajouter des icones dans vos liens (ou ailleurs).

Voyons notre page HTML qui contient trois liens vers des sites sociaux:
Code:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>

        <style>
            body {
                background-color: black;
            }
            ul {
                list-style: none;
            }
            ul > li {
                display: inline-block;
            }
            ul > li a {
                transition: color 1s ease;
                text-decoration: none;
                color: #939393;
                font-size: 18px;
                margin-right: 20px;
            }
            ul > li a:hover {
                color: orangered;
            }
        </style>
        <div id="media">
            <ul>
                <li><a href="https://www.facebook.com/" target="_blank">Facebook</a></li>
                <li><a href="https://twitter.com/" target="_blank">Twitter</a></li>
                <li><a href="https://www.linkedin.com/" target="_blank">Linkedin</a></li>
            </ul>
        </div>
   </body>


Ce qui donne en image:


On voit dans le code que grace à la fonction "hover", si on survole le lien, celui-ci change de couleur.
ça serait cool de pouvoir faire ça avec une icone, mais si on met une image ce serait impossible.

Mais ... allons voir du coté de chez https://fontawesome.com/, ils proposent une quantité impressionnante d'icones
Et cerise sur le gâteau, on peut modifier la taille et la couleur à volonté !

Ici je recherche un icon facebook, je tape simplement 'facebook' dans le moteur de recherche de fontAwesome, plusieurs résultats s'offrent à moi:


J'opte pour un style simple, je choisis le premier, je click dessus et le code de cette icone apparait :


Ici ce qui nous intéresse c'est la balise [i] à intégrer dans notre lien à la place du texe:
Code:
<i class="fab fa-facebook-f">


Je continue en recherchant de la même façon pour tweeter et linkedin, je récupère les balises [i].

Pour que tout cela fonctionne il toutefois est nécessaire d'ajouter le css de fontawesome, on le fait ici dans la balise <head>:
Code:

    <head>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    </head>


Et voilà notre code final, avec des jolies icones qui changent de couleur lorsqu'on les survole Okay
Code:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    </head>
    <body>

        <style>
            body {
                background-color: black;
            }
            ul {
                list-style: none;
            }
            ul > li {
                display: inline-block;
            }
            ul > li a {
                transition: color 1s ease;
                text-decoration: none;
                color: #939393;
                font-size: 18px;
                margin-right: 20px;
            }
            ul > li a:hover {
                color: orangered;
            }
        </style>
        <div id="media">
            <ul>
                <li><a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
                <li><a href="https://twitter.com/" target="_blank"><i class="fab fa-twitter"></i></a></li>
                <li><a href="https://www.linkedin.com/" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
            </ul>
        </div>
   </body>


En image:


Bien entendu, l'utilisation des ces icones n'est pas limitée aux liens, on peut les placer n'importe où, modifier leur taille, couleur, etc ..

Bon code Razz




______________________________________________________


L'ignorance est un fléau qui engendre la haine et la mort
La connaissance est une arme qui surpasse toutes les autres
Partagez votre savoir, sinon il sera perdu à jamais
Message Publicité 
PublicitéSupprimer les publicités ?


Montrer les messages depuis:
Répondre au sujet Page 1 sur 1
  



Index | créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Copyright 2008 - 2016 // Batch