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

Pokemon Community

T’façon tu m’aimes trop pour me tuer là. Et on est sur un forum tout public tu n’as pas le droit..
en savoir plus ?
Marcher puis dormir sous la lune.
Marcher puis s'enlacer jusqu'à l'aurore.
Marcher puis s'aimer pour l'éternité.
Marchaimer.
en savoir plus ?
Contrairement à ce que tu penses, les gens ne sont pas prisonniers de leurs idéaux. Et tu devrais toi-même en prendre conscience ...
en savoir plus ?
Les gosses dans ton genre n'ont aucune expérience de vie. Et certainement pas leur mot à dire pour juger les autres.
en savoir plus ?
T’es là depuis une seconde à peine et tu me casses déjà les couilles. C’est parfait.
en savoir plus ?
Je ferai tout pour que ce soit notre flamme qui reste allumée à la fin de ce combat.
en savoir plus ?
Je te l'ai dis Alex, à demi mot, que je t'aime. C'est vrai, pourtant je t'aime… Est-ce là? La fin de notre relation? Un message perdu que j'essaie de sauver au bord d'une plage alors que tu te noies dans tes sanglots? Je ne me savais pas condamné aux sables
en savoir plus ?
Tu es prêt Germain ? Reste sage et admire le spectacle, surtout n'interviens pas et sois gentil, trouve moi une cigarette.
en savoir plus ?
Je ne peux pas te contredire, tu as merdé en beauté.
en savoir plus ?
Je continuerai de t’aider, de t’assister, ou te servir, pour atteindre ton rêve. Même en sachant tout ça. Même si, pour se faire, je dois abandonner mes propres rêves.
en savoir plus ?
Son paquet d'Eucalyptus avait provoqué le chaos.
en savoir plus ?
Mademoiselle Potts ? Je suis désolée mais … est-ce que vous pourriez m’aider à trouver un partenaire, je ne connais personne et je …
en savoir plus ?

Enzo White
http://pokemoncommunity.forumactif.org/t7536-514-enzo-white-la-panique-mecanique-adulte#76980
http://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