font awesome icons showing empty boxes in prestashop 1.6

[vijaykryadav24]

we installed prestashop 1.6 in server.

 

 

somewhere font awesome icons showing perfectly   and 

 

somewhere icons showing empty boxes in prestashop 1.6

 

 

 

Kindly help us for better solution for the above problems.

Best Regards,

Edited March 11, 2015 by vijaykryadav24 (see edit history)

[FastComet]

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

[vijaykryadav24]

Thanks FastComet,

 

now it's working

[FastComet]

Hello, 

You are welcome  

Best Regards,

FastComet Team 

[more-control]

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.

[more-control]

Ignore my previous post realised that the folder with font awesome was renamed as "fonts" rather than font which was why they were not loading up on the site

[janoo]

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

[mipapage]

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 September 10, 2015 by mipapage (see edit history)

[maxfox44]

I am having the exact same issue with my store.

www.gustodirect.co.uk 

 

I'm using the default theme, without no css changes that I know of.

[Andrej Stas]

Hi, I made a new tutorial which shows a very easy installation of Font Awesome on your Prestashop 1.6.x

 

Have a look and let me know how it worked

 

http://presta-theme-maker.com/2015-09-27/easy-way-to-use-font-awesome-with-prestashop-1-6-x/

[maxfox44]

Hi Andrej

 

That looks great.  Will it solve the issue that my site is missing the default icons?

[maxfox44]

Don't worry, I've solved it.  I copied the fonts over from the theme to inside the bootstap theme and renamed the folder font instead of fonts.

[S7 Media Ltd]

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.

[castmrl10]

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 August 15, 2016 by castmrl10 (see edit history)

[vekia]

 

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.

[grigorevlad]

Hi,

 

Font Awesome icons disappeared when i turned on media servers. I fixed it by adding at the end of the .htaccess file:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin: *
</ifModule>

 

I hope it helps

[obewanz]

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 April 5, 2017 by obewanz (see edit history)

[Conrado_pl]

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!

[montynew]

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.

[obewanz]

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.