[TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome

Fondateur

Hello les ami(e)s,

même pendant la chaleur , je pense à vous MDR

.

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

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/#top

Pour 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

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 clin oeil

.

Allez, on se lance ?

Dans le template overall_header:
Affichage/Templates/Général/ overall_header

Recherchez 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 style
Ajoutez 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

Milouzien

Merci l'ami

Milouzien

Bonjour,
Pas tout compris là !
On en fait quoi de ces icônes ?

Milouzien

Hi Jakes,
Cette astuce permet de remplacer les icônes traditionnelles des forums par des icônes Fontawesome, comme celles présentes sur ce forum.

Milouzien

Justement, je ne vois pas grand chose oups

Tu parles boutons REPONDRE, CITER ...?

Fondateur

Hello Jakes,

l'aperçu est assez parlant sur cette image présente dans l'astuce:

On parle de l'éditeur clin oeil

Milouzien

Jakes, le titre de l'astuce mentionne "Les icônes de l'éditeur", et rien d'autre

Milouzien

À lire concernant "L'éditeur de message" > Clique

Milouzien

Oui ça je connais, ça date. C'est quoi l'intérêt ? C'est pour le fun ou ça présente des avantages ?
Par contre c'est bien d'avoir l'éditeur sur une réponse rapide.

D'autre part regarde mon dernier post, les répétions sont provoquées par appui sur la touche "supprimer" sur mon smartphone android.
Ça ne le fait pas sur PC sous Windows ni sur d'autres forums forumactif sous android.

Fondateur

C'est juste pour le fun mon ami, merci de ne plus polluer ce topic, si tu as des soucis merci de passer par l'entraide hinhin

Invité

Merci Phil impeccable

Milouzien

merci super

» [TOUTES VERSIONS] Afficher les icônes de contacts au survol du message
» [TOUTES VERSIONS] Toutes versions Bouton générateur d'iframes
» [TOUTES VERSIONS] Redirection immédiate personnalisée
» [TOUTES VERSIONS]Visualiser le mot de passe
» [TOUTES VERSIONS] Spoiler où l'on veut