[Débutant] Icônes | html css
Enzo White
Enzo White
Région d'origine : Hoenn - Pacifiville
Âge : 23 ans
Niveau : 10
Jetons : 1220
Points d'Expériences : 181
Adulte Blogueur
Sujet: [Débutant] Icônes | html css   Mar 4 Juin - 10:37


Icones
Tuto Débutant | HTML CSS

Hey les loulous !

C'est encore moi, à croire que cette catégorie m'appartient entièrement ! J'vais pas m'en plaindre, ça me permet d'étaler ma royale influence sur ce forum, mouahahahahahaha.

ahum.

Du coup, le sujet de ce tutoriel est plutôt simple mais ça permet de faire des trucs jolis très facilement. Et ça va surtout me permettre d'éviter de réexpliquer les choses à chaque nouveau code que je fais.

C'est déjà utilisé à quelques endroits dans le forum et dans les codes des uns et des autres, c'est joli, élégant, graphique et je vous parle des icônes !

Pas les grosses images de vos persos, non non, je parle de ce genre de petites choses là :

C'est joli hein ? J'aime bien ce genre de petit truc, ça permet d'habiller et de diversifier ce qu'un code plein de texte peut proposer.

Mais du coup, comment ça marche ?

Plutôt simplement au final. Il existe beaucoup de sites qui proposent ce genre de service. Certains sont payants, d'autre gratuits, certains moitié moitié. Bref, comme pour tout, l'internet déborde d'options.

Je vais vous présenter aujourd'hui celui que j'utilise personnellement. C'est FontAwesome et ça porte plutôt bien son nom.

On se retrouve dans deux situations maitenant. Vous voulez utiliser FontAwesome sur PC ou sur un autre site/forum. Vu que je suis gentille je vous montre les deux ! On commence par en dehors de PC !

Vous voulez utiliser FontAwesome sur un autre site/forum.

Depuis peu le site demande une inscription pour pouvoir accéder au contenu mais franchement, on a tous une adresse mail poubelle pour ce genre de bêtises pas vrai ?

J'vous laisse vous inscrire juste ici : clique vas y clique !

C'est bon ? Vous êtes inscrits ? Parfait, on continue.

Le site vous renvoie sur votre page et vous présente un kit. Pour notre utilisation, ça suffit amplement, sachez simplement que vous pouvez utiliser plusieurs kits pour différents projets par exemple.

Et on rentre enfin dans le vif du sujet. Maintenant, comment on l'utilise, concrétement. Bah c'est tout simple, au début de votre code ajouter le lien que vous donne le site, il doit être sous cette forme :

Code:
<script src="https://kit.fontawesome.com/votrenumérodekit.js"></script>

Et maintenant pour insérer les icons ? On y arrive dans la partie suivante !

Vous voulez utiliser FontAwesome sur PC.

Rien de plus simple, rendez vous ici !

Choissisez l'icon que vous souhaitez intégrer dans le code puis cliquez dessus. En haut de la page vous allez voir quelque chose qui ressemble plus ou moins à ceci :

Code:
<i class="fas fa-award"></i>

Copiez/collez ça dans votre post. Et voilà. C'est tout. Pour les bases. Avec rien que ça, vous pouvez déjà améliorer votre code avec facilité.

Cependant, je vous connais, vous kiffez la personnalisation ! Donc voici quelques petits points qui peuvent vous intéresser !

- Les icons sont considérés comme des caractères et vous pouvez modifier sa taille, sa couleur, bref son style en général.
- Attention ! Sur PC l'italique
Code:
<i>italique</i> ou [i]italique[/i]
est personnalisé. Si vous souhaitez passer par dessus cette limitation vous pouvez utiliser la technique suivante dans votre style :
Code:
.divDansLaquelleVotreIconEst i{votre style personnalisé}
Je ferais un jour un tuto sur les relations de style mais voilà, prennez la solution sans forcément la comprendre ok.

Et voilà ! Vous pouvez maintenant agrémenter vos codes de petites icônes sans vous embêter avec de la gestion d'images !
Comme toujours, si vous avez des questions n'hésitez pas à les poser, je me ferais un plaisir de répondre !

_________________


traveller
[Débutant] Icônes | html css
Page 1 sur 1
Permission de ce forum: Vous pouvez répondre aux sujets dans ce forum
Sauter vers:  
Outils de modération :