Faire tourner les outils de discutions avec FontAwesome

Arkanium_

Arkanium_

Membre
Inscription
19 Octobre 2016
Messages
139
Réactions
20
Points
1 449
RGCoins
25
Bonjour,

Ce tuto est une amélioration de celui ci https://reality-gaming.fr/threads/mettre-du-font-awesome-sur-les-icones-dedition.494105/
Mon premier petit tutoriel assez simple avec FA.

1341499989-ligne-separation.gif


Alors tout d'abord aller dans EXTRA.css et copier le code ci dessous :

PHP: 
.item.control.like:before, .item.control.reply:before, .item.control.bookmarks:before, .item.control.edit:before, .item.control.report:before, .item.control.warn:before, .item.control.ip:before,
.item.control.deleteSpam:before, .item.control.history:before, .item.control.delete:before
{
display: inline-block;
font-family: FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right: 5px;
}
.item.control.like:before
{
content: "\f087";
}

.item.control.like:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}

.item.control.reply:before
{
content: "\f122";
}

.item.control.reply:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}


.item.control.bookmarks:before
{
content: "\f02e";
}

.item.control.bookmarks:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}

.item.control.edit:before
{
content: "\f040";
}

.item.control.edit:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}

.item.control.report:before
{
content: "\f071";
}

.item.control.report:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}

.item.control.warn:before
{
content: "\f12a";
}

.item.control.warn:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}

.item.control.ip:before
{
content: "\f002";
}

.item.control.ip:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}

.item.control.deleteSpam:before
{
content: "\f024";
}

.item.control.deleteSpam:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}

.item.control.history:before
{
content: "\f1da";
}

.item.control.history:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}

.item.control.delete:before
{
content: "\f00d";
}

.item.control.delete:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}

Puis ensuite si vous avez au préalable installé Font Awesome sur votre forum vous n'aurez pas besoins de suite la partie qui va suivre du tutoriel

1341499989-ligne-separation.gif


Si vous n'avez pas Font Awesome allez dans le template PAGE_CONTAINER et cherchez ceci :

PHP: 
<xen:include template="page_container_js_head" />

Une fois trouvé collez ce code juste en dessous

PHP: 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Et voilà Font Awesome est installé !
Ou sinon vous pouvez le télécharger :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.


Si vous avez des soucis faites en moi part dans les réponses

Screen du résultat :

b0541db21cbe47f3936e4ab21ff246e6.png


​
 
Dernière édition:
Arkador36 a dit:
Bonjour,

Ce tuto est une amélioration de celui ci https://reality-gaming.fr/threads/mettre-du-font-awesome-sur-les-icones-dedition.494105/
Mon premier petit tutoriel assez simple avec FA.

1341499989-ligne-separation.gif


Alors tout d'abord aller dans EXTRA.css et copier le code ci dessous :

PHP: 
.item.control.like:before, .item.control.reply:before, .item.control.bookmarks:before, .item.control.edit:before, .item.control.report:before, .item.control.warn:before, .item.control.ip:before,
.item.control.deleteSpam:before, .item.control.history:before, .item.control.delete:before
{
display: inline-block;
font-family: FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right: 5px;
}
.item.control.like:before
{
content: "\f087";
}

.item.control.like:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}

.item.control.reply:before
{
content: "\f122";
}

.item.control.reply:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}


.item.control.bookmarks:before
{
content: "\f02e";
}

.item.control.bookmarks:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}

.item.control.edit:before
{
content: "\f040";
}

.item.control.edit:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}

.item.control.report:before
{
content: "\f071";
}

.item.control.report:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}

.item.control.warn:before
{
content: "\f12a";
}

.item.control.warn:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}

.item.control.ip:before
{
content: "\f002";
}

.item.control.ip:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}

.item.control.deleteSpam:before
{
content: "\f024";
}

.item.control.deleteSpam:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}

.item.control.history:before
{
content: "\f1da";
}

.item.control.history:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}

.item.control.delete:before
{
content: "\f00d";
}

.item.control.delete:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}

Puis ensuite si vous avez au préalable installé Font Awesome sur votre forum vous n'aurez pas besoins de suite la partie qui va suivre du tutoriel

1341499989-ligne-separation.gif


Si vous n'avez pas Font Awesome allez dans le template PAGE_CONTAINER et cherchez ceci :

PHP: 
<xen:include template="page_container_js_head" />

Une fois trouvé collez ce code juste en dessous

PHP: 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">

Et voilà Font Awesome est installé !
Si vous avez des soucis faites en moi part dans les réponses

Screen du résultat :

b0541db21cbe47f3936e4ab21ff246e6.png


​
Cliquez pour agrandir...
Quitte à faire un tutoriel sur FontAwesome, donne au moins le lien de la dernière version (d)
PHP: 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 
Reaqz a dit:
Quitte à faire un tutoriel sur FontAwesome, donne au moins le lien de la dernière version (d)
PHP: 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Cliquez pour agrandir...
Merci à toi je modifie
 
Retour
Haut