[Solucionado] No aparecen iconos fontawesome

nationonfire · May 12, 2014

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.

Edited May 24, 2014 by nationonfire (see edit history)

ventura · May 13, 2014

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

nationonfire · May 13, 2014

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

ventura · May 13, 2014

No, no influye para nada, prueba con Firebug a ver que ruta te marca, te pasa en varios navegadores ?

Edited May 13, 2014 by ventura (see edit history)

nationonfire · May 13, 2014

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 May 16, 2014 by nationonfire (see edit history)

nationonfire · May 16, 2014

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.

nationonfire · May 16, 2014

He probado a añadir en el header.tpl esto sin éxito:

ventura · May 16, 2014

Prueba a añadir la fuente asi para ver si es tema de rutas o no

nationonfire · May 16, 2014

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

ventura · May 16, 2014

La has puesto en el header.tpl de

admin/themes/default/template/header.tpl

¿?

Has probado en otro ordenador ¿?

nationonfire · May 16, 2014

Que va, ese directorio no le tengo creado.

Lo he puesto en admin/themes/default/headter.tpl, justo debajo del primer <head>

No he probado en otro ordenador, lo probaré a ver, pero me da que seguirá igual...

nationonfire · May 18, 2014

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 May 18, 2014 by nationonfire (see edit history)

nationonfire · May 24, 2014

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 May 24, 2014 by nationonfire (see edit history)

Genis1990 · September 4, 2014

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 !

Iceman_SDMF · November 28, 2014

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.

[Solucionado] No aparecen iconos fontawesome

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites