Discussion :

[spoir]

Bonjour,

Dans le but de diminuer un peu la taille d'une page web,
je souhaite supprimer le chargement de "Font-awesome"
et remplacer ses icones par des petits fichiers "gif".

Pour faire simple je souhaite remplacer par exemple :
<i class="fa fa-exclamation-circle"></i>,
Par :
<img src="fa-exclamation-circle.gif" alt="">.

J'ai les éléments d'une regex qui ferait l'affaire, à savoir :
remplacer :
<i class="fa (fa-.*?)"></i>,
par :
<img src="$1\.gif" alt="">,

mais je ne sais pas comment les intégrer dans ma page web.
Quelqu'un pourrait-il m'aider s'il vous plait ?
En vous remerciant d'avance.
Jean-Jacques

[NoSmoking]

Bonjour,

Dans le but de diminuer un peu la taille d'une page web,

tu vas peut-être diminuer la taille des pages mais pas forcément les échanges serveur/client, de part la présence d'image ou alors utilise une image sprite mais là encore tu vas augmenter la taille de ton CSS.

Qu'est ce que tu souhaites faire exactement,

• modifier à la volée ;
• modifier ton code une bonne fois pour toute dans ton éditeur ;
• autre...

D'autres pistes peuvent également être envisageables comme la modification/création dune feuille CSS personnalisée.

[SpaceFrog]

Il suffirait de surcharger les classes fa par tes propres classes et les charger après fontawsome ...

[spoir]

Merci beaucoup pour votre réponse.

Je souhaite faire la modification à la volée, genre un script JS dans mon footer.

Cela me permettrait de traiter toutes les pages facilement et automatiquement.

Et si, pour une raison que je ne connais pas encore je souhaite faire marche arrière,
il me sera plus facile de supprimer ce script JS de mon footer et de décommenter la ligne Font-awesome
dans mon header plutôt que de remodifier tous mes fichiers.

[spoir]

Merci beaucoup pour votre réponse.
La surcharge des classes dépasse, de beaucoup, mes compétences.

[SpaceFrog]

C'est plus simple que de le faire en js ...
Et c'est réversible en ce sens qu'il suffit de supprimer le lien vers le css ...

Dasn le code ça donnerait un truc du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<lien vers css de fontawsaome>
<lien vers css de surcharge>

et dans le fichier css de surcharge

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.fa-exclamation-circle { 
  /* ici reprise et annullation des css rules de la classe originelle */
  .../...
  /* ici surcharge avec attribution des images */
  height: 100px;
  width:100px;
  background-image: ...
}

[spoir]

Bonjour,

Je viens de trouver la solution que je souhaitais.

J'ai ajouter dans mon footer le code suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<script>
        var chaine = document.body.innerHTML;
        var cherche = /<i class="fa (fa-.*?)"><\/i>/gi;
        var remplace = '<img src="image\/catalog\/site\/$1\.gif" alt="">'
        document.body.innerHTML = chaine.replace(cherche,remplace);
</script>

Merci pour votre aide.
Jean-Jacques