Connexion
Pokemon Community :: Hors-jeu :: Atelier graphique :: Tutoriels

Pokemon adala community

« J’ai juste envie de profiter de cette soirée, et de ce nouveau début de vie… Même si je sais que je ne suis pas encore au bout de mes surprises. »
en savoir plus ?
« Cette mission est déjà un calvaire, alors stp essaie de pas la rendre encore pire, ça m’arrangerait. »
en savoir plus ?
« Je ne suis pas sûr qu’il soit l’heure de distribuer de l’eau bénite, nous savons déjà tous que vous êtes un ange Ranya, mais je suis touché de votre bénédiction. »
en savoir plus ?
« Je me déteste. Je me déteste de toutes mes forces. »
en savoir plus ?
« C'est un fantôme que tu enlaces, Faulkner. »
en savoir plus ?
Le soleil tape. Les gens hurlent. Il en a marre. Ce n’est pas un tournoi. C’est un poisson d’avril.
en savoir plus ?
« Il est beau... Tu en as de la chance... »
en savoir plus ?
Le Deal du moment : -20%
Super Mario 3D-All Stars – Jeu Nintendo Switch
Voir le deal
35.99 €

Enzo White
https://pokemoncommunity.forumactif.org/t7536-514-enzo-white-la-panique-mecanique-adulte#76980
https://pokemoncommunity.forumactif.org/t7548-enzo-white-adulte#77041
Icon : [Débutant] Icônes | html css BHJNPf
Taille de l'équipe : 5/7
Région d'origine : Hoenn - Pacifiville
Âge : 25 ans
Niveau : 10
Jetons : 1320
Points d'Expériences : 190
[Débutant] Icônes | html css BHJNPf
5/7
Hoenn - Pacifiville
25 ans
10
1320
190
pokemon
[Débutant] Icônes | html css BHJNPf
5/7
Hoenn - Pacifiville
25 ans
10
1320
190
Enzo White
est un Adulte Blogueur


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
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
reply