• qu'est-ce que c'est ?

    Alors ceux qui sont déjà venus chercher des icones ici ont certainement du remarquer que je les ai numérotés. Ils sont tous numérotés de la même manière, comme l'exemple ci-dessous.

     

    comment faire ?

    Tout d'abord vous ouvrez votre feuille de style CSS
    Apparence > Modifier le thème > Ajouter du CSS

    Ensuite vous copiez/collez le code ci-dessous

    .ico {
    padding: 0px;
    float: left;
    background-color: #couleur du fond qui apparaît gris clair sur l'exemple;
    margin: 5px;
    }


    .iconame {
    color: #couleur du texte;
    font-family: Arial;
    font-size: 11px;

    text-align: center;
    }

    Comme d'habitude, les explications !
    padding c'est la taille de la bordure qu'il y a entre l'image et le fond, ici elle est réglée sur 0px mais vous pouvez bien sur changer le chiffre à votre guise. float c'est l'emplacement de votre image, là c'est left pour gauche mais vous pouvez mettre right si vous la souhaitez à droite de l'article. margin correspond à une marge extérieure qui entoure votre icon, cette marge permettra de séparer deux icons côte à côte. Dans l'exemple, 5px séparerons les icons mais vous pouvez changer la valeur si vous en avez envie.

    font-family c'est la police de texte utilisée pour écrire votre numéro (Ou votre texte), là j'ai mis Arial mais vous pouvez mettre Impact ou Georgia, etc. font-size correspond à la taille de votre texte et text-align à son alignement, si vous le voulez à droite center est à remplacer par right ou bien à gauche, à remplacer par left.

    Bon, c'est sympa tout ça mais maintenant on va faire du HTML.
    Donc créez vite un article, cliquez sur le bouton HTML de l'interface et copiez/collez ce code

    <div class="ico"><img src="urldevotreimage"><br />
    <div class="iconame">votre numero ou votre texte ici</div>
    </div>

    Fermez puis enregistrer et le tour est joué !
    Si vous voulez mettre plusieurs icons côtes à côtes il suffit de répeter le code autant de fois qu'il y a d'icons.
    Et ce sans rajouter d'espace ou autre car la propriété margin du CSS mentionné en haut est là pour ça.

    Posez toutes vos questions par commentaires, je me ferai un plaisir d'y répondre au plus vite !


    13 commentaires