Jump to content

Small Icons missing

jlisman
 Share

Recommended Posts

jlisman Newbie

jlisman

Posted
Posted

We installed PS last weekend and loved it.  We had some server issues and had to re-install the cart again.  We finally got it working and got the back office speeded up, but now all the small icons are missing....see below.  Depending on the browser, we either get little squares or nothing at all.  It's not effecting the functionality, but I would like to know why they aren't working.  Any ideas??

 

Small Icons.pdf

post-851170-0-67350400-1413041803_thumb.jpg

 

Thank you

Link to comment
Share on other sites
bside2234 Newbie

bside2234

Posted
Posted

I believe those are all Fontawesome icons so make sure you have the font in your Admin/themes/default/fonts folder

I have 5 items in this folder:

fontawesome (a font file)

fontawesome-webfont.eot

fontawesome-webfont.svg

fontawesome-webfont.ttf (another font file)

fontawesome-webfont.woff

 

If you don't have them you can download the Prestshop download and copy them to your server via FTP or you can get them in Github and FTP them from there.

Link to comment
Share on other sites
bside2234 Newbie

bside2234

Posted
Posted

Could be but I would check your Admin/themes/default/css/admin-theme.css file against the Github version or simply backup and replace the CSS file with the Github one. There should be a big block of code (line 4 in mine) that has tons off css for fontawesome icons.

Link to comment
Share on other sites
  • 1 month later...
  • 3 weeks later...
  • 3 months later...
Melinda Newbie

Melinda

Posted
Posted

Hi,

 

This is not working for me. I am on 1.6.0.13 and only see little square and rectangler icons in the admin and on the website using firefox. In safari all of the icon images in the admin are showing.What is happening with firefox? I have emptied the cache and cookies and still problems with firefox browser.

Link to comment
Share on other sites
  • 3 weeks later...
Pieter Newbie

Pieter

Posted
Posted

This one took some searching...

 

rolled back to original global.css and awesomefont icons were visible again

started looking what changes made them disappear, proved that saving the global.css in coffecup html editor without any changes was enough!

problably the way the editor handles the ""  in the css

 

changed editor to notepad++ and problem gone  :)

Link to comment
Share on other sites
Melinda Newbie

Melinda

Posted
Posted

Hi,

 

I found the reason my fonts were not showing up on some stores but they did show up on other stores in firefox browser.

 

Check your theme and make sure the name of the fonts folder is "fonts" (plural) and NOT "font".

 

Hope this helps.

  • Like 1
Link to comment
Share on other sites
  • 3 weeks later...
Nihelan Newbie

Nihelan

Posted
Posted

Hi,

 

I found the reason my fonts were not showing up on some stores but they did show up on other stores in firefox browser.

 

Check your theme and make sure the name of the fonts folder is "fonts" (plural) and NOT "font".

 

Hope this helps.

 

After enabling SSL I had same problem, think your simple solution worked for me. Somehow the 'fonts' folder was not present.

After I manually created a new folder with the name 'fonts' the files were already inside..prob some sync issue I guess.

Link to comment
Share on other sites
  • 1 month later...
pietro Newbie

pietro

Posted
Posted

I have done all of the above, deleting cache, turning CCC off, having font and fonts in all folders, using different browsers. I made changes to the global.css so i saved it using different software, i also loaded the original file. Nothing works, the icons do not come back (they used to show fine).

 

Your help will be appreciated,

Link to comment
Share on other sites
pietro Newbie

pietro

Posted
Posted

I have done all of the above, deleting cache, turning CCC off, having font and fonts in all folders, using different browsers. I made changes to the global.css so i saved it using different software, i also loaded the original file. Nothing works, the icons do not come back (they used to show fine).

 

Your help will be appreciated,

Thank you, I figure it out, it was another CSS file that I modified and font awesome got corrupted. So I uploaded the original file and everything is good again.

 

I never had issues editing CSS files, why is it an issue now with PS1.6?

 

Thanks,

Link to comment
Share on other sites
martbean Newbie

martbean

Posted
Posted

started looking what changes made them disappear, proved that saving the global.css in coffecup html editor without any changes was enough!

problably the way the editor handles the ""  in the css

 

changed editor to notepad++ and problem gone  :)

 

I'm having the same problem but with Dreamweaver CS6 rather than Coffecup. I don't really want to use a different editor so is there a solution, maybe involving character encoding? To clarify, when I open global.css I get content: "" but when I save, close and reopen it I get content: "".

 

The encoding is set to UTF-8 - is that correct?

 

Thanks,

 

Martin.

Link to comment
Share on other sites
  • 4 months later...
ezsmoke Newbie

ezsmoke

Posted
Posted

This one took some searching...

 

rolled back to original global.css and awesomefont icons were visible again

started looking what changes made them disappear, proved that saving the global.css in coffecup html editor without any changes was enough!

problably the way the editor handles the ""  in the css

 

changed editor to notepad++ and problem gone  :)

This worked for me just now after upgrading from 1.6.0.9 to 1.6.1.2

I too had edited global.css using Coffee Cup, and the file must have got corrupted

Link to comment
Share on other sites
  • 2 months later...
kashifkhan112 Newbie

kashifkhan112

Posted
Posted

Problem: FontAwesome icons was not showing when i enable ssl

 

solution:

Actually i was using custom made theme and there was missing global.css and 'fonts' folder, i have copied global.css and fonts folder from 'default-bootstarp' theme and paste it to my custom theme now it works for me :) :) :)

 

My shop version is: 1.6.1.1

Link to comment
Share on other sites
  • 1 month later...
  • 3 months later...
Sara_CCS Newbie

Sara_CCS

Posted
Posted

I'm running PS 1.5 with the Jewellry theme.  My small icons aren't showing up on my site or my admin in Firefox or Chrome.  I've gone through the steps here, as has my developer-friend who is WAY better at .css than I am.  Simply put, what is the simplest way to fix this?  I need help from the theme developer on a function on my site, and his team nor he will help me with it until this icon issue is fixed.

Link to comment
Share on other sites
Sara_CCS Newbie

Sara_CCS

Posted
Posted

The section mentioned is not in PS, but in Firefox.

 

I figured that out, didn't find it at first, then went back and combed that page again.  I found it this time, but my settings were already at the recommended ones, so... <sigh>  Back to the drawing board.

Link to comment
Share on other sites
Sara_CCS Newbie

Sara_CCS

Posted
Posted

Do you have a URL we can take a look at to see the problem?

 

Martin.

 

My site is coastalcarolinasoap.com.  You can see the random squares/rectangles in the black contact bar at the top of the home page, as well as in the search and cart boxes near the top.  The link to my admin is coastalcarolinasoap.com/admin123.  There, you see colored boxes under the login box where PS's social media links should be.  I see the boxes in Firefox and Chrome; however, the icons show up in Safari.

Link to comment
Share on other sites
martbean Newbie

martbean

Posted
Posted

OK, it's a permissions issue with the FontAwesome font files. Here's what's showing up in Firebug:

 

NetworkError: 403 Forbidden - http://coastalcarolinasoap.com/themes/jewellery/fonts/fontawesome-webfont.woff2?v=4.5.0

NetworkError: 403 Forbidden - http://coastalcarolinasoap.com/themes/jewellery/fonts/fontawesome-webfont.woff?v=4.5.0

NetworkError: 403 Forbidden - http://coastalcarolinasoap.com/themes/jewellery/fonts/fontawesome-webfont.ttf?v=4.5.0

 

So check the permissions of the /themes/jewellery/fonts/ folder (should be 755 if it's a Linux server). If that doesn't fix it, check the font files themselves (including .eot and .svg) - they should be set to 644.

 

BTW, I get the same black boxes in Safari too.

 

Hope this helps!

 

Martin.

Link to comment
Share on other sites
catydragon Newbie

catydragon

Posted
Posted

Thanks Martin!

 

Unfortunately i checked all occurrences of those files and they are seem to have the same permission level, so i modified like you suggested.  Still no luck.  I still get the NetworkError 405.

 

 
BTW, i am a web developer, just not a php developer.  So this should be easy for e to understand.  Except it isn't. And it is driving me mad! :)
 
Oh and i am help Sara with her site.  Or trying to at least.  Any other ideas?
Link to comment
Share on other sites
Sara_CCS Newbie

Sara_CCS

Posted
Posted

OK, it's a permissions issue with the FontAwesome font files. Here's what's showing up in Firebug:

 

NetworkError: 403 Forbidden - http://coastalcarolinasoap.com/themes/jewellery/fonts/fontawesome-webfont.woff2?v=4.5.0

NetworkError: 403 Forbidden - http://coastalcarolinasoap.com/themes/jewellery/fonts/fontawesome-webfont.woff?v=4.5.0

NetworkError: 403 Forbidden - http://coastalcarolinasoap.com/themes/jewellery/fonts/fontawesome-webfont.ttf?v=4.5.0

 

So check the permissions of the /themes/jewellery/fonts/ folder (should be 755 if it's a Linux server). If that doesn't fix it, check the font files themselves (including .eot and .svg) - they should be set to 644.

 

BTW, I get the same black boxes in Safari too.

 

Hope this helps!

 

Martin.

 

Well, shoot.  A friend posted a screen shot from her iphone, and it looked good.

 

I checked my permissions on those files; they were set too high, and I adjusted them all to 644, as well as checking the permissions on the other font-awesome files in that folder.

 

As catdragon says ^^^ he's helping me.  He's a developer, but .php is far from his most proficient language.  This seems to be mostly .css, though; that force is fairly strong in him.

Link to comment
Share on other sites
martbean Newbie

martbean

Posted
Posted

Hi,

 

Have you checked the permissions of the fonts folder too? It should be 755.

 

If so, it could be an ownership issue. Check the owner and group of the folder and the font files matches all the other files.

 

If that's all OK, it may be worth checking the Apache error log to see if it gives any clues.

 

Martin.

Link to comment
Share on other sites
martbean Newbie

martbean

Posted
Posted

You could try adding these lines to your .htaccess file:

 

AddType application/vnd.ms-fontobject    .eot
AddType application/x-font-opentype      .otf
AddType image/svg+xml                    .svg
AddType application/x-font-ttf           .ttf
AddType application/font-woff            .woff

 

Also, see this answer: http://stackoverflow.com/a/12059850

It might be that font files are being blocked by your .htaccess file or your Apache configuration.

 

If none of this helps I would suggest talking to your hosting provider as it sounds like a server configuration issue.

 

Martin.

Link to comment
Share on other sites
  • 4 months later...
Xwioch Newbie

Xwioch

Posted
Posted (edited)

Hi guys, I'm taking up this topic because I have the same issue. I did all the things that you all said in the previous post but seems not working for me. I'm asking for help :)

 

UPDATE: The only things I didn't check was the .htacces file and I found it in my code. Is it ok or should I change something? I'm really asking for some help because I can't fix it on my own.

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
<IfModule mod_headers.c>
	<FilesMatch "\.(ttf|ttc|otf|eot|woff|svg)$">
		Header add Access-Control-Allow-Origin "*"
	</FilesMatch>
</IfModule>
Edited by Xwioch (see edit history)
Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...