Jump to content

[Solucionado] No aparecen iconos fontawesome


Recommended Posts

Hola a tod@s, es mi primera acción en el foro.

 

Gracias por vuestros consejos, llevo varios días solucionando un montón de cosas.

 

Os escribo porque no me aparecen los iconos ni en la web ni en el panel de control, instalé prestashop 1.6 y ya desde inicio estos iconos no aparecen.

 

Estoy utilizando la plantilla por defecto.

 

Directamente me muestra el código fontawesome, por ejemplo, en vez de aparece el icono de facebook, lo que muestra es "f09a".

 

Por lo que he estado leyendo, debe ser que no tengo bien direccionada el origen de estas librerías.

 

Os dejo una imagen que muestra lo que os comento, gracias de antenamo.

post-784229-0-70509900-1399934183_thumb.jpg

Edited by nationonfire (see edit history)
Link to comment
Share on other sites

mira a ver si tienes los archivos de la fuente en tu carpeta admin en esta ruta

admin/themes/default/font/

Tambien mira en el archivo admin-theme.css si tienes cargada la parte de fontawesome a partir de la linea 680 hasta la 1488 más o menos

Link to comment
Share on other sites

Hola ventura, concretamente la carpeta es "fonts" (con s) y los archivos que tengo ahí son estos:

- fontawesome-webfront.eot

- fontawesome-webfront.svg

- fontawesome-webfront.ttf

- fontawesome-webfront.woff

- FontAwesome.olt

 

En el admin-theme.css tengo la parte de fontawesome que comentas.

 

Quizás tenga algo que ver que he renombrado la carpeta admin como aconsejaba la instalación y he perdido la dirección donde los archivos marcan al fontawesome...nose

 

Gracias

Link to comment
Share on other sites

mira por ejemplo en el admin-theme.css para uno de los iconos:

 
.icon-star:before {
    content: "\f005";
 

Otro ejemplo, ya en la tienda, en el icono del idioma:

 

#languages-block-top div.current:after {
    color: #686666;
    content: "\f0d1";
    font-family: "FontAwesome";
    font-size: 18px;
    line-height: 18px;
    padding-left: 12px;
    vertical-align: -2px;

 

Estos dos son los códigos f005 y f0d1 creo, pero qué ruta tendría que ponerle...y lo peor de todo...como tenga que cambiarlo en todos los css...

 

He probado con firefox, explorer y chrome y en todos me ocurre lo mismo.

Edited by nationonfire (see edit history)
Link to comment
Share on other sites

Creeis que quizás tenga que añadir algo en el header.tpl

 

He comprobrado que en todas las referencias a los archivos fontawesome (global.css, modulos...) me iban dirigidas a ../fonts/fontawesome.. y la carpeta de mi tienda era /theme/plantilla/font

 

La he renombrado a: /theme/plantilla/fonts... Pero siguen sin aparecerme.

 

Sigo en la búsqueda.

Link to comment
Share on other sites

nada tampoco me funciona.

 

Voy a ver si me entero bien de la ubicación y del uso específico de cada archivo porque hay varios y nosé cual llama a cuál y dónde deben ir colocados. Me acabo haciendo un lío con:

font-awesome.min.css

font-awesome.css

font-awesome-ie7.css

 

Gracias por la ayuda

Link to comment
Share on other sites

Os doy algo más de información por si a alguien se le ocurre qué me puede estar ocurriendo...

 

La versión de fontawesome que me ha instalado prestashop 1.6 es la 3.2.1 y todos los archivos (del theme) que he localizado que tiene "algo que ver" con fontawesome en mi tienda son estos:
 

theme/default_template/font
 .htaccess
 FontAwesome.ttf
 FontAwesome.otf
 frontawesome-webfront.eot
 frontawesome.webfront.svg
 frontawesome.webfront.woff
theme/default_template/css/font-awesome
 font-awesome-ie7.css
 font-awesome-ie7.min.css
 font-awesome.min.css
theme/default_template/css
font-awesome.css
theme/default_template/sass/font-awesome
 _bootstrap.scss
 _core.scss
 _extras.scss
 _icons.scss
 _mixins.scss
 _path.scss
 _variables.scss
 font-aweome.ie7.css

theme/default_template/sass
 font-awesome.scss

Por un lado en el header.tpl, he probado a añadir estas líneas en el <head> sin éxito:

 

Para CDN

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Para local:

<link rel="stylesheet" href="/css/bootstrap_lib/bootstrap.css">
<link rel="stylesheet" href="/css/font-awesome/font-awesome.min.css">

En mi archivo global.css esto es lo que me referencia:

/*!
 *  Font Awesome 3.2.1
 *  the iconic font designed for Bootstrap
 *  ------------------------------------------------------------------------------
 *  The full suite of pictographic icons, examples, and documentation can be
 *  found at http://fontawesome.io.'>http://fontawesome.io.  Stay up to date on Twitter at
 *  http://twitter.com/fontawesome.
 *
 *  License
 *  ------------------------------------------------------------------------------
 *  - The Font Awesome font is licensed under SIL OFL 1.1 -
 *    http://scripts.sil.org/OFL
 *  - Font Awesome CSS, LESS, and SASS files are licensed under MIT License -
 *    http://opensource.org/licenses/mit-license.html
 *  - Font Awesome documentation licensed under CC BY 3.0 -
 *    http://creativecommons.org/licenses/by/3.0/
 *  - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
 *    "Font Awesome by Dave Gandy - http://fontawesome.io"
 *
 *  Author - Dave Gandy
 *  ------------------------------------------------------------------------------
 *  Email: [email protected]
 *  Twitter: http://twitter.com/davegandy
 *  Work: Lead Product Designer @ Kyruus - http://kyruus.com
 */
/* 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; }

/* BOOTSTRAP SPECIFIC CLASSES
 * -------------------------- */
/* Bootstrap 2.0 sprites.less reset */
[class^="icon-"],
[class*=" icon-"] {
  display: inline;
  width: auto;
  height: auto;
  line-height: normal;
  vertical-align: baseline;
  background-image: none;
  background-position: 0% 0%;
  background-repeat: repeat;
  margin-top: 0; }

/* more sprites.less reset */
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
  background-image: none; }

/* keeps Bootstrap styles with and without icons the same */
.btn [class^="icon-"].icon-large,
.btn [class*=" icon-"].icon-large, .nav [class^="icon-"].icon-large,
.nav [class*=" icon-"].icon-large {
  line-height: .9em; }
.btn [class^="icon-"].icon-spin,
.btn [class*=" icon-"].icon-spin, .nav [class^="icon-"].icon-spin,
.nav [class*=" icon-"].icon-spin {
  display: inline-block; }

.nav-tabs [class^="icon-"], .nav-tabs [class^="icon-"].icon-large,
.nav-tabs [class*=" icon-"],
.nav-tabs [class*=" icon-"].icon-large, .nav-pills [class^="icon-"], .nav-pills [class^="icon-"].icon-large,
.nav-pills [class*=" icon-"],
.nav-pills [class*=" icon-"].icon-large {
  line-height: .9em; }

.btn [class^="icon-"].pull-left.icon-2x, .btn [class^="icon-"].pull-right.icon-2x,
.btn [class*=" icon-"].pull-left.icon-2x,
.btn [class*=" icon-"].pull-right.icon-2x {
  margin-top: .18em; }
.btn [class^="icon-"].icon-spin.icon-large,
.btn [class*=" icon-"].icon-spin.icon-large {
  line-height: .8em; }

.btn.btn-small [class^="icon-"].pull-left.icon-2x, .btn.btn-small [class^="icon-"].pull-right.icon-2x,
.btn.btn-small [class*=" icon-"].pull-left.icon-2x,
.btn.btn-small [class*=" icon-"].pull-right.icon-2x {
  margin-top: .25em; }

.btn.btn-large [class^="icon-"],
.btn.btn-large [class*=" icon-"] {
  margin-top: 0; }
  .btn.btn-large [class^="icon-"].pull-left.icon-2x, .btn.btn-large [class^="icon-"].pull-right.icon-2x,
  .btn.btn-large [class*=" icon-"].pull-left.icon-2x,
  .btn.btn-large [class*=" icon-"].pull-right.icon-2x {
    margin-top: .05em; }
  .btn.btn-large [class^="icon-"].pull-left.icon-2x,
  .btn.btn-large [class*=" icon-"].pull-left.icon-2x {
    margin-right: .2em; }
  .btn.btn-large [class^="icon-"].pull-right.icon-2x,
  .btn.btn-large [class*=" icon-"].pull-right.icon-2x {
    margin-left: .2em; }

/* Fixes alignment in nav lists */
.nav-list [class^="icon-"],
.nav-list [class*=" icon-"] {
  line-height: inherit; }

/* EXTRAS
 * -------------------------- */
/* Stacked and layered icon */
.icon-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: -35%; }
  .icon-stack [class^="icon-"],
  .icon-stack [class*=" icon-"] {
    display: block;
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 1em;
    line-height: inherit;
    *line-height: 2em; }
  .icon-stack .icon-stack-base {
    font-size: 2em;
    *line-height: 1em; }

/* Animated rotating icon */
.icon-spin {
  display: inline-block;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  -webkit-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear; }

/* Prevent stack and spinners from being taken inline when inside a link */
a .icon-stack,
a .icon-spin {
  display: inline-block;
  text-decoration: none; }

@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg); }

  100% {
    -moz-transform: rotate(359deg); } }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(359deg); } }

@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg); }

  100% {
    -o-transform: rotate(359deg); } }

@-ms-keyframes spin {
  0% {
    -ms-transform: rotate(0deg); }

  100% {
    -ms-transform: rotate(359deg); } }

@keyframes spin {
  0% {
    transform: rotate(0deg); }

  100% {
    transform: rotate(359deg); } }

/* Icon rotations and mirroring */
.icon-rotate-90:before {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }

.icon-rotate-180:before {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); }

.icon-rotate-270:before {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }

.icon-flip-horizontal:before {
  -webkit-transform: scale(-1, 1);
  -moz-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  transform: scale(-1, 1); }

.icon-flip-vertical:before {
  -webkit-transform: scale(1, -1);
  -moz-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  transform: scale(1, -1); }

/* ensure rotation occurs inside anchor tags */
a .icon-rotate-90:before, a .icon-rotate-180:before, a .icon-rotate-270:before, a .icon-flip-horizontal:before, a .icon-flip-vertical:before {
  display: inline-block; }

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
 * readers do not read off random characters that represent icons */
.icon-glass:before {
  content: "\f000"; }

.icon-music:before {
  content: "\f001"; }

.icon-search:before {
  content: "\f002"; }

.icon-envelope-alt:before {
  content: "\f003"; }

.icon-heart:before {
  content: "\f004"; }

.icon-star:before {
  content: "\f005"; }

.icon-star-empty:before {
  content: "\f006"; }

.icon-user:before {
  content: "\f007"; }

.icon-film:before {
  content: "\f008"; }

....etc
Edited by nationonfire (see edit history)
Link to comment
Share on other sites

Hola

 

Bueno os comento por si a alguien le ocurre lo mismo, ya he logrado solucionar el asunto.

1.- He tenido que descargarme de la versión 3.2.1 de font-awesome el archivo "font-awesome.min.css" y colocarlo en:

theme/default/css

 

2.- Tambien he tenido que descargame el archivo bootstrap.min.css de la versión 3.0.0 que es la que utiliza mi prestashop. Y colocarlo en el theme/default/css

 

Para el tema del panel de control (tampoco me aparecían los iconos), resulta que en este caso el fontawesome era 4.0.3, por lo que he renombrado la carpeta "fonts" a "font", también he cambiado las referencias a estos archivos en admin/theme/default/css

admin-theme

admin-theme_rtl.css

temp-danoosh_admin-theme_rtl.css

Y también referenciado a la cdn en el header.tpl del admin (admin/theme/default/template)

 

3.- Añadiendo en el header.tpl de la ruta (theme/default/) la referencia a las carpetas de estos archivos

 

Un saludo,

Edited by nationonfire (see edit history)
Link to comment
Share on other sites

  • 3 months later...

A mi me pasaba algo similar, al canviar la ip del servidor, etc los iconos no me salian o salian mal.

 

fl --> en buscar

Mr/Mis --> en blanco 

 

etc.....

 

Solución : 

 

Parametros Avanzados / Rendimiento, desactivar:

- "Smart cache" para las hojas de estilo (CSS)

"Smart cache" para el código de JavaScript

 

Si con esto no os va bien, el .htcacces remplazar ipvieja por ip nueva

i ejecutar ./ctl.... retstart apache

 

Con esto todo ira super bien !

 

  • Like 3
Link to comment
Share on other sites

  • 2 months later...

A mi me pasaba algo similar, al canviar la ip del servidor, etc los iconos no me salian o salian mal.

 

fl --> en buscar

Mr/Mis --> en blanco 

 

etc.....

 

Solución : 

 

Parametros Avanzados / Rendimiento, desactivar:

- "Smart cache" para las hojas de estilo (CSS)

"Smart cache" para el código de JavaScript

 

Si con esto no os va bien, el .htcacces remplazar ipvieja por ip nueva

i ejecutar ./ctl.... retstart apache

 

Con esto todo ira super bien !

Funciona a las 1000 maravillas. Yo había duplicado el tema default para modificarlo y al pasar mi instalación de prestashop de un pc a otro me aparecían cuadraditos en lugar de las imagenes. He hecho lo que comentas y ya esta todo ok.

 

Gracias.

  • Like 1
Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
×
×
  • Create New...