Utilisation des FontAwesome sur RealityGaming

[1899]

TUTORIEL : UTILISATION DES FONT AWESOME SUR REALITYGAMING



I. Le FontAwesome, c'est quoi ?

Le FontAwesome est une police d'écriture web, utilisant des icônes à la place des lettres. Cette police est celle qu'utilise RealityGaming pour à peut près toute ses icônes : Etoiles VIP et AS, Crayon des rédacteurs et écriteau de développement pour les développeurs ; Navigation et plus récemment dans les topics. ​

Exemples : ​

https://reality-gaming.fr/proxy.php?image=http%3A%2F%2Fi.imgur.com%2FSPD1zCH.png&hash=34de247310af6594f22cb5c04dfb3e55

II. Comment les utiliser ?

Bien que de base utilisable uniquement en HTML, il existe une façon de l'utiliser en BBCODE, soit le langage d'écriture des topics qu'utilise RealityGaming. A chaque stylisation en BBCODE, il est obligatoire d'utilise des balises !
​

Exemples :​

[Font=Open Sans Condensed]Texte[/font]
[Color=#006d80]Text[/color]
[IMG]https://reality-gaming.fr/styles/realitygaming/logo.svg[/IMG]
[URL=lien]Texte[/URL]
[LIST]
[*][COLOR=#000000]Test[/COLOR]
[/LIST]

Ce qui donne exactement ceci :​

Texte
Text
https://reality-gaming.fr/styles/realitygaming/logo.svg

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

• Test

Et bien, les FontAwesome utilisent aussi des balises, et cette balise est :​

[FA]FontAwesome[/FA]

C'est grâce à cette balise qu'en BBCODE les FontAwesome sont utilisés, évidemment, à la place de FontAwesome, entre la balise du FA, vous devez mettre l'ID de l'icône que vous souhaitez utiliser, pour le tutoriel, je vais utiliser ceci : fa-cog.
​

Exemple :​

[FA]fa-cog[/FA]

​

Donc, vous voyez que c'est très loin d'être difficile ! ​

: Pour une liste complète des icônes FontAwesome, rendez vous

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

.

Pour trouver l'ID de l'icône que vous souhaitez utiliser, il suffit de se rendre sur celui qui vous désirez, et de prendre ce qui se trouve en dessous des différentes tailles de votre icône :

C'est (par exemple) fa-exclamation-circle que vous devez mettre dans la balise [FA.] !

https://reality-gaming.fr/proxy.php?image=http%3A%2F%2Fi.imgur.com%2FSPD1zCH.png&hash=34de247310af6594f22cb5c04dfb3e55

III. Les personnalisations

Oui ! Il vous est possible de personnaliser vos icônes avec un simple ajout, peu difficile à mémoriser... Je vous montre tout ça :
​

Taille :
​

[FA]fa-cog fa-lf[/FA]
[FA]fa-cog fa-2x[/FA]
[FA]fa-cog fa-3x[/FA]
[FA]fa-cog fa-4x[/FA]
[FA]fa-cog fa-5x[/FA]

Avez vous vus ? J'ai simplement ajouté fa-*x pour modifier la taille de l'icône, sur une échelle de 1 à 5x (et pas px).
​

Border :
​

Vous avez vus l'icône que j'ai mis en place au début de mon topic ? Et bien il sagit d'une icone utilisant un bord !​

[FA]fa-cog fa-5x fa-border[/FA]

Toujours aussi simple. ​

Rotations :
​

Vous pouvez aussi faire tourner vos icônes, il y'a deux façons : la rotation fluide et la rotation pulsive. Ce n'est pas vraiment difficile non plus, il y'a juste un petit code à ajouter derrière votre ID :
​

[FA]fa-cog fa-5x fa-spin[/FA]
[FA]fa-cog fa-5x fa-pulse[/FA]

fa-spin sers à faire une rotation fluide et fa-pulse sert à faire une rotation pulsive !​

Inclinaison :
​

Vous pouvez incliner votre icône, de toute les manières, verticale, horizontal, 90°, 180°, 270° !
​

[FA]fa-shield[/FA]
[FA]fa-shield fa-rotate-90[/FA]
[FA]fa-shield fa-rotate-180[/FA]
[FA]fa-shield fa-rotate-270[/FA]
[FA]fa-shield fa-flip-vertical[/FA]
[FA]fa-shield fa-flip-horizontal[/FA]

Il faut suffit d'utiliser fa-rotate-* pour incliner votre icone, et fa-flip-vertical pour retourner votre icone.
​

Astuce: vous pouvez combiner toutes les personnalisations !

MISE A JOUR 23/07/2016

Une icône intégrer dans la barre de rédaction permet d'avoir la liste de tous les FontAwesome disponible sur le site. Il est symbolisé par un drapeau !


Si vous cliquez dessus, une liste s'ouvrira, vous pourrez ainsi choisir celui que vous voulez intégrer à votre topic !

https://reality-gaming.fr/proxy.php?image=http%3A%2F%2Fi.imgur.com%2FSPD1zCH.png&hash=34de247310af6594f22cb5c04dfb3e55

C'est tout pour ce tutoriel, si vous avez des questions, posez les j'y répondrais !

© GoodTopicPremium - Loucasse GTP​

 

[deleted535977]

 

[1899]

Topic mis à jour

 

[deleted535977]

 

[Kong SEC]

Salut, désoler de re-up ce topic mais pour le marteau qui fait le même mouvement que pour les modérateurs, comment faire ?

 

[1899]

Salut, désoler de re-up ce topic mais pour le marteau qui fait le même mouvement que pour les modérateurs, comment faire ?

Impossible malheureusement ^^

 

[deleted577633]

Salut, il faut que tu précises que depuis pas mal de temps rajouter fa- après