integrer nouveaux Font awesome

[batiplus54]

bonjour,

 

Je cherche à intégrer de nouvelle icone, font awesome afin de l' intégrer dans un module.

 

Je sais comment l' intégrer au module et faire l' appelle depuis le global.CSS, j ai  également ma nouvelle icone au format

 

vectoriel .SVG mais je ne sais pas du tout comment l' intégrer à la liste des icônes existantes.

 

Sur prestashop 1.6, dans le dossier ../themes/default-bootstrap/font, il y a des fichier .SVG, est ce que ce serait l' un de ces

fichiers à modifier?

 

Merci

 

 

[Alexandre Carette]

Bonjour,

Pas besoin de modifier des fichiers, fais ca en css:

.mail::before {
    color: rgba(0, 0, 0, 0.39);
    font-family: "FontAwesome";
    content: "\f003"; /* ICI TU CHANGES UNICODE EX  "\f19d" */
    font-size: 16px;
    margin-right:5px;
}

Je trouve mes Unicode par exemple sur ce site: http://fortawesome.github.io/Font-Awesome/icon/graduation-cap/

[batiplus54]

je suis d' accord pour intégrer un icon en CSS avec un icon déjà existant possédant un Unicode

 

mais j' ai créer un icon au format vectoriel pour en avoir un personnalisé qui n'est disponible sur aucun de ces site c' est

 

pour cela que je cherche le fichier où intégrer mon nouvel icon perso.

 

j' ai utiliser le site icomoon.io pour créer les fichier nécessaire mais je ne sais pas ou les placer exactement.

 

voici le fichier zip que je récupère avec tout les fichiers 

 

icomoon.zip

[Alexandre Carette]

dans le css d' font-awesome il y a ca, peut etre en indiquant le chemin de ta font.

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

[batiplus54]

en ajoutant le chemin de ma nouvelle font elle prend le dessus sur l' original "Fontawesome" don toute les icon sur mon site sont remplacé par des carré.

 

J' ai utilisé une autre solution en passant directement par des images plutôt que des icon et cela fonctionne aussi bien.

 

Cdt. 

[Alexandre Carette]

l'interêt des awesome font n'est-il pas justement de ne pas utiliser des images pour des gains de performance ?

[batiplus54]

oui c 'est pour un gain de performance par rapport a des images classiques et l' intérêt aussi de pouvoir modifier les

 

caractéristiques ( taille, couleur, ombre ...)  directement dans un CSS.

 

Dans mon cas, n' utilisant q' une au deux images a la place d' un icon cela ne gène en rien la performance et peu être aussi question de facilité et rapidité 

Edited September 20, 2015 by batiplus54 (see edit history)