Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Astuces Forumactif

EDGE/ PHPBB2 / PHPBB3/ PUNBB / INVISION/ MODERNBB/ AWESOMEBB
 
AccueilAccueil  PortailPortail  Connexion  S'enregistrerS'enregistrer  
Le deal à ne pas rater :
Cartes Pokémon EB12.5 : commander le coffret ETB Zénith Suprême
Voir le deal

 

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

Aller en bas 
4 participants
AuteurMessage
Milouze14
Fondateur

Milouze14



[TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome Empty
MessageSujet: [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome   [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome EmptyVen 12 Juil 2019 - 19:36

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   Enregistr puis Ajout


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 [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome Sans_t10




Dernière édition par Milouze14 le Lun 29 Nov 2021 - 16:29, édité 6 fois
Revenir en haut Aller en bas
https://www.milouze14.com
Splash
Milouzien

Splash



[TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome Empty
MessageSujet: Re: [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome   [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome EmptyVen 12 Juil 2019 - 22:35

Merci l'ami
Revenir en haut Aller en bas
https://lesforums.caforum.fr
jakes
Milouzien

avatar



[TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome Empty
MessageSujet: Re: [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome   [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome EmptyDim 14 Juil 2019 - 9:46

Bonjour,
Pas tout compris là !
On en fait quoi de ces icônes ?
Revenir en haut Aller en bas
https://gambas.forumactif.fr/forum
Splash
Milouzien

Splash



[TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome Empty
MessageSujet: Re: [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome   [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome EmptyDim 14 Juil 2019 - 9:49

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.
Revenir en haut Aller en bas
https://lesforums.caforum.fr
jakes
Milouzien

avatar



[TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome Empty
MessageSujet: Re: [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome   [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome EmptyDim 14 Juil 2019 - 10:26

Justement, je ne vois pas grand chose  oups
Tu parles boutons REPONDRE, CITER ...?
Revenir en haut Aller en bas
https://gambas.forumactif.fr/forum
Milouze14
Fondateur

Milouze14



[TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome Empty
MessageSujet: Re: [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome   [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome EmptyDim 14 Juil 2019 - 11:15

Hello Jakes,

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

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

On parle de l'éditeur clin oeil
Revenir en haut Aller en bas
https://www.milouze14.com
Splash
Milouzien

Splash



[TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome Empty
MessageSujet: Re: [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome   [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome EmptyDim 14 Juil 2019 - 11:23

Jakes, le titre de l'astuce mentionne "Les icônes de l'éditeur", et rien d'autre
Revenir en haut Aller en bas
https://lesforums.caforum.fr
Splash
Milouzien

Splash



[TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome Empty
MessageSujet: Re: [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome   [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome EmptyDim 14 Juil 2019 - 12:50

À lire concernant "L'éditeur de message" > Clique
Revenir en haut Aller en bas
https://lesforums.caforum.fr
jakes
Milouzien

avatar



[TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome Empty
MessageSujet: Re: [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome   [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome EmptyDim 14 Juil 2019 - 14:06

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.
Revenir en haut Aller en bas
https://gambas.forumactif.fr/forum
Milouze14
Fondateur

Milouze14



[TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome Empty
MessageSujet: Re: [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome   [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome EmptyDim 14 Juil 2019 - 16:10

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
Revenir en haut Aller en bas
https://www.milouze14.com
Invité
Invité
Anonymous



[TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome Empty
MessageSujet: Re: [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome   [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome EmptySam 20 Juil 2019 - 11:23

Merci Phil  impeccable
Revenir en haut Aller en bas
BarTender
Milouzien

avatar



[TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome Empty
MessageSujet: Re: [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome   [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome EmptyVen 21 Fév 2020 - 13:08

merci super

Revenir en haut Aller en bas
https://chezbabygraph.forumactif.com/
Contenu sponsorisé





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

Revenir en haut Aller en bas
 
[TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [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

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Astuces Forumactif :: Astuces Forumactif :: Toutes versions-
Sauter vers: