changer l'icone dans les forums

Bartoon Ze Best Membre non connecté

Booster Fronde

Le 28/02/2017 à 13h35

Bonjour

une nouvelle question, je souhaiterais savoir si l'on peut changer l'icone devant les messages dans le forum. La bulle qui signale quand il y a un nouveau message ou pas. Au depart je pensais que c'etait une image, mais je n'ai pas trouver. Donc j'ai utiliser firefox et l'add on que vous conseillez pour comprendre comment marche les css et qui permet de voir les styles d'un element particulier, et quand je clique sur cette icone voila ce qu'il me dit :

Code CSS :

/* Ligne 1 */
*
{
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  font-size: 100%;
  box-sizing: border-box;
}
 
/* Ligne 1 */
.fa
{
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-size-adjust: none;
  font-stretch: normal;
  font-feature-settings: normal;
  font-language-override: normal;
  font-kerning: auto;
  font-synthesis: weight style;
  font-variant-alternates: normal;
  font-variant-caps: normal;
  font-variant-east-asian: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-variant-position: normal;
  font-size: inherit;
  text-rendering: auto;
}
 
/* Ligne 1 */
.fa
{
  vertical-align: middle;
}
 
/* Ligne 1 */
.fa:hover
{
  text-decoration-line: none;
  text-decoration-style: solid;
}

J en ai déduis qu'il s'agissais d'une fonte "FontAwesome", j ai chercher sur internet et j'ai vu que c’était une fonte d icônes pour les css (si j ai bien compris en anglais

)

Bon par contre j'ai pas chercher a télécharger la fonte mais ma question est : peut on remplacer cette icone par une image en .png ou .gif ? Si oui comment je peux faire ?

merci d'avance.

ElenWii Membre non connecté

Equipe Graphique Administrateur

Le 28/02/2017 à 15h31

#157304

Bonjour,

FontAwesome est en libre téléchargement et vous pouvez ajouté des icones via des outils en ligne.

Mais si vous souhaitez remplacer juste par des images, il sera préférable de remplacer l'icone par une image. Ce sujet a déjà été traité dans le forum.

Voici la synthèse que swan avait faite :

Citation :

voilà la solution si quelqu’un d'autre cherche :

Note: On ne travaille jamais sur les fichier template à la racine du CMS , mais toujours dans son thème !

1/ Vérifier dans votre dossier /templates/mon-thème/modules que le dossier forum soit existant ou pas.
- Si existant avoir le dossier images ( si pas de dossier images le créer ! Mettre ses mon-icon.png/jpg dedans.
- Si pas existant, créer le dossier forum et dedans créer le dossier images Mettre ses mon-icon.png/jpg dedans.

2/ Dans le dossier forum à la racine , ouvrez le dossier templates, faite un clic droit sur le fichier forum.css et faites "copier" et placez le dans le dossier /templates/mon-thème/modules/forum/. Éditez votre fichier css ..

3/ A partir de la ligne 625, vous avez les déclarations des icones FA avec ce code :

Code CSS :

.fa-announce:before,
.fa-announce-new:before         { content: "\f075"; }
.fa-announce-hot:before,
.fa-announce-new-hot:before     { content: "\f086"; }
.fa-announce-lock:before,
.fa-announce-new-lock:before     { content: "\f023"; }
.fa-announce-post:before,
.fa-announce-new-post:before     { content: "\f071"; }
.fa-announce-top:before,
.fa-announce-new-top:before     { content: "\f06a"; }
.fa-announce:before,
.fa-announce-hot:before         { color: #D1D2D4; }
.fa-announce-new:before,
.fa-announce-new-hot:before     { color: #676A74; }
.fa-msg-display:before             { content: "\f00c"; color: #478948; }
.fa-msg-not-display:before         { content: "\f00d"; color: #BA4B49; }
.fa-msg-track:before             { content: "\f004"; color: #BA4B49; }
.fa-msg-not-track:before         { content: "\f004"; color: #000000; }
.fa-pm-track:before             { content: "\f0e0"; color: #4372AA; }
.fa-pm-not-track:before         { content: "\f0e0"; color: #000000; }
.fa-mail-track:before             { content: "\f003"; color: #4372AA; }
.fa-mail-not-track:before         { content: "\f003"; color: #000000; }
.fa-lastview:before             { content: "\f017"; color: #334455; }
.fa-notread:before                 { content: "\f0f6"; color: #334455; }

Pour chaque éléments, vous pouvez remplacer les

content

comme ceci :

Code CSS :

.fa-announce:before,
.fa-announce-new:before         { content: url('images/mon-icon.png'); }

Cette pratique est valable pour tous les icones FontAwesome que vous avez dans vos fichiers.

Et pour finir, si la gestion du cache est activé, dans l'administration /outils/cache/configuration pensez à rafraichir vos caches dans l'administration /outils/cache pour tpl & css : cliquez sur "Vider".

Bonne journée.

Swan