Hello les ami(e)s,
même pendant la chaleur , je pense à vous

.
L'astuce consiste a remplacer toutes les icônes de l'éditeur par celle de la bibliothèque "Font Awesome" .
L'éditeur de la version EDGE est basée sur le même principe.
En faite, on va remplacer toutes les icônes représentées par des images.
Le résultat imagé:
![[TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome 210](https://i.servimg.com/u/f18/20/07/69/84/210.png)
La C.S.S est commentée afin que vous puissiez vous repérer pour changer leurs apparences.
Vous pouvez aller sur cette page pour voir les icônes disponibles:
http://seehowsupport.com/font-awesome/#topPour information , la ccs fonctionne ainsi:
Sur la première rangée et à gauche vous verrez ceci (sous réserve de modification, le procédé reste inchangé):
![[TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome 111](https://i.servimg.com/u/f18/20/07/69/84/111.png)
Il faut juste retenir le "26e" que vous déposerez dans la parti concernée de l'icône.
Toutes les icônes figurant dans la feuille de style auront la propriété "content" suivante:
- Code:
-
content: "\fxxx";
Il faudra donc modifier ce qui suit la barre oblique et le f soit:
- Code:
-
content: "\f";
La C.S.S est déjà fonctionnelle pour tous les boutons les ami(e)s,
ensuite à vous de les modifier selon vos envies

.
Allez, on se lance ?
Dans le template overall_header:
Affichage/
Templates/
Général/
overall_headerRecherchez ceci:
- Code:
-
{T_HEAD_STYLESHEET}
Juste avant déposez ceci:
- Code:
-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Pensez a enregistrer puis à valider en cliquant respectivement sur
puis
Dans la feuille de style:
Affichage/
Images et Couleurs/
Couleurs/
Feuille de styleAjoutez ceci:
- Code:
-
a.sceditor-button div{background-image:none;}
/*BOUTON GRAS*/
a.sceditor-button.sceditor-button-bold:after
{
content: "\f032";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON ITALIC*/
a.sceditor-button.sceditor-button-italic:after
{
content: "\f033";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON SOULIGNER*/
a.sceditor-button.sceditor-button-underline:after
{
content: "\f0cd";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON BARRE*/
a.sceditor-button.sceditor-button-strike:after
{
content: "\f0cc";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON ALIGNER A GAUCHE*/
a.sceditor-button.sceditor-button-left:after
{
content: "\f036";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON CENTRER*/
a.sceditor-button.sceditor-button-center:after
{
content: "\f037";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON ALIGNER A DROITE*/
a.sceditor-button.sceditor-button-right:after
{
content: "\f038";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON JUSTIFIER*/
a.sceditor-button.sceditor-button-justify:after
{
content: "\f039";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON LISTE*/
a.sceditor-button.sceditor-button-bulletlist:after
{
content: "\f0ca";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON LISTE ORDONNEE*/
a.sceditor-button.sceditor-button-orderedlist:after
{
content: "\f0cb";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON INSERER UNE LIGNE*/
a.sceditor-button.sceditor-button-horizontalrule:after
{
content: "\f068";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON CITER*/
a.sceditor-button.sceditor-button-quote:after
{
content: "\f10D";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON CODE*/
a.sceditor-button.sceditor-button-code:after
{
content: "\f121";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON SPOILER*/
a.sceditor-button.sceditor-button-faspoiler:after
{
content: "\f066";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON CACHE*/
a.sceditor-button.sceditor-button-fahide:after
{
content: "\f070";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON INSERER UN TABLEAU*/
a.sceditor-button.sceditor-button-table:after
{
content: "\f0ce";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON HEBERGER UNE IMAGE*/
a.sceditor-button.sceditor-button-servimg:after
{
content: "\f01c";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON INSERER UNE IMAGE*/
a.sceditor-button.sceditor-button-image:after
{
content: "\f03e";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON INSERER UN LIEN*/
a.sceditor-button.sceditor-button-link:after
{
content: "\f0C1";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON INSERER UNE VIDEO DAILYMOTION*/
a.sceditor-button.sceditor-button-dailymotion:after
{
content: "\f03d";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON INSERER UNE VIDEO YOUTUBE*/
a.sceditor-button.sceditor-button-youtube:after
{
content: "\f166";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON INSERER UN FLASH*/
a.sceditor-button.sceditor-button-flash:after
{
content: "\f0e7";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON FORMAT DES TITRES*/
a.sceditor-button.sceditor-button-headers:after
{
content: "\f1dc";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON TAILLE POLICE*/
a.sceditor-button.sceditor-button-size:after
{
content: "\f031";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON COULEUR POLICE*/
a.sceditor-button.sceditor-button-color:after
{
content: "\f1fb";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON POLICE*/
a.sceditor-button.sceditor-button-font:after
{
content: "\f15d";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON SUPPRIMER FORMATAGE DU TEXTE*/
a.sceditor-button.sceditor-button-removeformat:after
{
content: "\f016";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON SUPPRIMER FORMATAGE DU TEXTE*/
a.sceditor-button.sceditor-button-removeformat.disabled:after
{
content: "\f1c3";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
opacity:0.6;
}
/*BOUTON PLUS OU MOINS DE BOUTONS*/
a.sceditor-button.sceditor-button-more:after
{
content: "\f065";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON INDICE*/
a.sceditor-button.sceditor-button-subscript:after
{
content: "\f12c";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON EXPOSANT*/
a.sceditor-button.sceditor-button-superscript:after
{
content: "\f12B";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON DEFILEMENT HORIZONTAL*/
a.sceditor-button.sceditor-button-fascroll:after
{
content: "\f060";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON DEFILEMENT VERTICAL*/
a.sceditor-button.sceditor-button-faupdown:after
{
content: "\f062";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON DEFILEMENT ALEATOIRE*/
a.sceditor-button.sceditor-button-farand:after
{
content: "\f0b2";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON DATE*/
a.sceditor-button.sceditor-button-date:after
{
content: "\f073";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON SMILEYS*/
a.sceditor-button.sceditor-button-emoticon:after
{
content: "\f118";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON HEURE ACTUELLE*/
a.sceditor-button.sceditor-button-time:after
{
content: "\f017";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON INSERER DU TEXTE SANS FORMATAGE*/
a.sceditor-button.sceditor-button-pastetext:after
{
content: "\f0f6";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON INSERER DU TEXTE SANS FORMATAGE DESACTIVE*/
a.sceditor-button.sceditor-button-pastetext.disabled:after
{
content: "\f1c3";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
opacity:0.6;
}
/*BOUTON BASCULER DE MODE D EDITION WYSIWYG*/
a.sceditor-button.sceditor-button-source:not(.hover):after
{
content: "\f11c";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON BASCULER DE MODE D EDITION HTML*/
a.sceditor-button.sceditor-button-source:after
{
content: "\f0f6";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
Pensez a cliquer sur le bouton