Jump to content

font awesome icons showing empty boxes in prestashop 1.6


Recommended Posts

Hello, 

 

The icons you are referring to are part of the integrated Font Awesome instance which comes with the default setup of Prestashop. 

If the icons are not shown correctly you can check if the font awesome file exist in the adminxxx/themes/default/fonts/ folder, the themes/default-bootstrap/fonts folder and in case it is also added to the custom theme you are using themes/theme-name/fonts

If the files are there but the icons are still not shown, please disable all the caches and then enable those again as sometimes the Smart cache is causing this issue. 

Best Regards,
FastComet Team

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

Hi there

 

I'm having difficulties with Font Awesome. Recently made a modification to global.css file and uploaded it back to the site (shop.more-control.com).

Since the upload the font awesome is no longer working.

 

I've tested the files on a local copy of the site and it is working fine. But online the icon (font awesome) is not loading.

I've tried via the back office to disable all cache and cleared the cache but no luck.

 

Any suggestions would be greatful.

Link to comment
Share on other sites

  • 1 month later...

If you have in Backoffice > Advanced parameters > Performance

activaded Cache and CCC (Combine, Compress and Cache) to Yes

you should try to clear all cache files except Index.php

in /cache/purifier/CSS/

in /cache/purifier/HTML/

in /cache/purifier/URI/

in /cache/smarty/cache/

in /cache/smarty/compile/

even in /themes/active-theme/cache/

and reload page with CTRL+F5

Link to comment
Share on other sites

  • 3 months later...

Since this result is top in Google for this problem, we had a different issue causing it and I'll share it here.

 

Our font-awesome icons were not appearing. I tried the above solutions, no luck. I noticed that our global.css was showing blocks or simply nothing between the "" in the icon definitions in the CSS. I tried copying and pasting from other valid copies of global.css but that did not seem to work. Weird. So I went to the font-awesome website and copied that part of the code into global.css, replacing the 'fa' of font-awesome for the 'icon' of PrestaShop (Why PS, Why? You take parts of bootstrap but not all of it, then take font-awesome and rename the class selectors?)

Edited by mipapage (see edit history)
  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
  • 4 weeks later...

Since this result is top in Google for this problem, we had a different issue causing it and I'll share it here.

 

Our font-awesome icons were not appearing. I tried the above solutions, no luck. I noticed that our global.css was showing blocks or simply nothing between the "" in the icon definitions in the CSS. I tried copying and pasting from other valid copies of global.css but that did not seem to work. Weird. So I went to the font-awesome website and copied that part of the code into global.css, replacing the 'fa' of font-awesome for the 'icon' of PrestaShop (Why PS, Why? You take parts of bootstrap but not all of it, then take font-awesome and rename the class selectors?)

THIS! Thank you. I had the same problem. No codes in the Content declaration. Replaced these lines from an older install of Prestashop.

Link to comment
Share on other sites

  • 9 months later...

I have problem with my icons too. I dont know whats wrong .... can you please help me ....,   and for that reason i google said that is not secure web. and in mobile is not showing at all.

http://tarheelfurnituregallery.specialcapturemediagroup.com/

THESE ARE THE ERROR THAT IT SHOWS WHEN I CHECKED THE ELEMENTS OF THE WEBSITE:

 

http://tarheelfurnituregallery.specialcapturemediagroup.com/images/bx_loader.gif Failed to load resource: the server responded with a status of 404 (Not Found)
Edited by castmrl10 (see edit history)
Link to comment
Share on other sites

 

I have problem with my icons too. I dont know whats wrong .... can you please help me ....,   and for that reason i google said that is not secure web. and in mobile is not showing at all.

http://tarheelfurnituregallery.specialcapturemediagroup.com/

THESE ARE THE ERROR THAT IT SHOWS WHEN I CHECKED THE ELEMENTS OF THE WEBSITE:

 

 
 
http://tarheelfurnituregallery.specialcapturemediagroup.com/images/bx_loader.gif Failed to load resource: the server responded with a status of 404 (Not Found)

 

 

you use font awesome with path that points to your local hdd

 

 

use external address instead that is accessible from internet.

Link to comment
Share on other sites

  • 4 weeks later...
  • 6 months later...

If you are getting no fa icons, look in your /themes/theme-name/css/autoload folder to see if the font-awesome.css stylesheet exists in that folder - if not look in the /themes/theme-name/css/font-awesome folder to find it.

 

Next you will probably have to modify the path in the css file so that the urls to the actual fonts read something like this:

src: url("../../fonts/fontawesome-webfont.eot?v=4.3.0");
(the ../../ part is what is important)

 

If you still have no fonts, use "view source" in your browser to make sure that you have a link to the stylesheet - if not, something beyond the scope of this instruction went wrong and you probably need to have a professional look into the issue.

 

That link should look something like this:

<link rel="stylesheet" href="/themes/YOUR-THEME-NAME/css/autoload/font-awesome.css" type="text/css" media="all" />
Edited by obewanz (see edit history)
Link to comment
Share on other sites

  • 1 year later...
  • 1 year later...

There's another possible problem and solution, probably not many people would make this mistake, but when adding a font to the global.css, do not replace the Font Awesome 'font path' entry (example below) with the new primary global font, but rather add a second font path entry for the new font. 

FA font path entry:
 

Quote

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

Additional font entry:

Quote

@font-face {
    font-family: 'Conv_AmaticSC-Regular';
    src: url("../fonts/AmaticSC-Regular.eot");
    src: local('☺'), url("../fonts/AmaticSC-Regular.woff") format('woff'), url("../fonts/AmaticSC-Regular.ttf") format('truetype'), url('fonts/AmaticSC-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;}

So the combined entry looks like:

Quote

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

@font-face {
    font-family: 'Conv_AmaticSC-Regular';
    src: url("../fonts/AmaticSC-Regular.eot");
    src: local('☺'), url("../fonts/AmaticSC-Regular.woff") format('woff'), url("../fonts/AmaticSC-Regular.ttf") format('truetype'), url('fonts/AmaticSC-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;}

Pretty basic stuff but easy to miss the forest for the trees.

Link to comment
Share on other sites

On 11/18/2018 at 7:13 PM, Conrado_pl said:

Hi!

Can someone help me with my PS ? I tried all sollutions but nothing works.
Please check my product, maybe you can see why I don`t have any icons ?
Link to my shop

Kind regards!

Looks to me as though you have a theme problem (or someone altered the theme incorrectly)...

Within your leo_toys theme product.css there are multiple @import statements scattered throughout the stylesheet.

Instead there should be ONE line similar to the following:

/* primary_block ***************************************************************************** */
@import url('https://fonts.googleapis.com/css?family=Lato');

The @import rule must be at the top of the document (but after any @charset declaration).

 

And in this particular case, later within the style sheet, the font should be called as follows:

#usefull_link_block li a:before {
  font-family: 'Lato';
  font-size: 16px;
  line-height: 24px;
  position: absolute;
  left: 0;
  font-weight: normal;
}

- - - NOT - - -

#usefull_link_block li a:before {
  font-family: @import url('https://fonts.googleapis.com/css?family=Lato');
  font-size: 16px;
  line-height: 24px;
  position: absolute;
  left: 0;
  font-weight: normal;
}

Since this mistake has been made, my guess is that fontawesome isn't being imported or loaded anywhere... a quick fix might be available by making sure that the font-awesome.css file is in the autoload folder of your theme (ie: /themes/leo_toys/css/autoload/).

NOTE: You'll need to make sure that the url reference in the font-awesome.css file points to the folder where the fonts actually reside - you'll be looking for something like "fontawesome-webfont.eot", probably in a /themes/leo_toys/fonts/ folder.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...