Problème affichage image de type css content: "\f0d7";

[cmai]

Bonjour,

J'ai du faire une erreur car toutes les images générées par un css de type content: "\f0d7"; sont remplacées par des carrés.

Quelqu'un pourrait-il m'aider ?

Merci

Catherine

[Divine]

Bonjour,

 

Quelle est l'URL de ta boutique stp ?

Edited September 3, 2014 by Divine (see edit history)

[cmai]

Bonjour,

Elle est en cours de construction :

www.c-mai.fr/jurisophos

Merci pour ton aide

[Divine]

Je pense que tu as un souci avec @font-face, je ne vois aucun appel dans ton fichier global.css

[cmai]

Effectivement @font-face est introuvable dans le global.css de mon modèle.

Peux-tu me donner la ou les ligne(s) à rajouter ?

Merci

[Divine]

Je te donne les lignes du thème de base Prestashop 1.6.0.9 :

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

[cmai]

Je viens de copier ces lignes, et ça marche avec certaines "images" comme dans le panier et dans la recherche, également pour facebook et twitter, mais pas pour d'autres. ma version est : 1.6.0.8 ?

Je ne comprends pas comment ces lignes ont pu disparaitre, mais ça doit bien être le cas car au départ, tout marchait !

Est-ce que tu penses qu'il me manque encore autre chose ?

merci

[Divine]

Vérifie que tu as bien tout ça dans ton fichier :

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

/* FONT AWESOME CORE
 * -------------------------- */
[class^="icon-"],
[class*=" icon-"] {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  *margin-right: .3em; }

[class^="icon-"]:before,
[class*=" icon-"]:before {
  text-decoration: inherit;
  display: inline-block;
  speak: none; }

/* makes the font 33% larger relative to the icon container */
.icon-large:before {
  vertical-align: -10%;
  font-size: 1.33333em; }

/* makes sure icons active on rollover in links */
a [class^="icon-"],
a [class*=" icon-"] {
  display: inline; }

/* increased font size for icon-large */
[class^="icon-"].icon-fixed-width,
[class*=" icon-"].icon-fixed-width {
  display: inline-block;
  width: 1.14286em;
  text-align: right;
  padding-right: 0.28571em; }
  [class^="icon-"].icon-fixed-width.icon-large,
  [class*=" icon-"].icon-fixed-width.icon-large {
    width: 1.42857em; }

.icons-ul {
  margin-left: 2.14286em;
  list-style-type: none; }
  .icons-ul > li {
    position: relative; }
  .icons-ul .icon-li {
    position: absolute;
    left: -2.14286em;
    width: 2.14286em;
    text-align: center;
    line-height: inherit; }

[class^="icon-"].hide,
[class*=" icon-"].hide {
  display: none; }

.icon-muted {
  color: #eeeeee; }

.icon-light {
  color: white; }

.icon-dark {
  color: #333333; }

.icon-border {
  border: solid 1px #eeeeee;
  padding: .2em .25em .15em;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px; }

.icon-2x {
  font-size: 2em; }
  .icon-2x.icon-border {
    border-width: 2px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px; }

.icon-3x {
  font-size: 3em; }
  .icon-3x.icon-border {
    border-width: 3px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; }

.icon-4x {
  font-size: 4em; }
  .icon-4x.icon-border {
    border-width: 4px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px; }

.icon-5x {
  font-size: 5em; }
  .icon-5x.icon-border {
    border-width: 5px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px; }

.pull-right {
  float: right; }

.pull-left {
  float: left; }

[class^="icon-"].pull-left,
[class*=" icon-"].pull-left {
  margin-right: .3em; }
[class^="icon-"].pull-right,
[class*=" icon-"].pull-right {
  margin-left: .3em; }

[cmai]

effectivement, Il m'en manquait encore un morceau et maintenant, apparemment, ça a l'air de fonctionner !

C'est génial !

Je vérifie encore d'autres pages et après je mets  le post en résolu.

Un grand merci à toi pour ton aide, je ne suis pas une habituée des forums et je ne pensais pas avoir de l'aide aussi vite et surtout aussi performante, mais là tu m'as vraiment convaincue !

[Divine]

Héhé pas de souci ^^