Search Icon showing as Letter "j" instead of Magnifying Glass

[Siamese-Dream.Com]

On the Suivant theme, where there is supposed to be a Magnifying Glass icon, it instead shows the letter "j"

Look at the end of the top navigation bar after the link for clothing and jewelry:

http://dev.thebuddhagarden.com/medicine-buddha-1.html

Any ideas on how to fix this?

Actually, it looks like ALL my icons are messed up... The icons before the Orders and My Account tabs at the top show as single letters, and the icons under the contact column (footer area, bottom right), show as letters, too?

Thanks in advance.

[Gordon - Phosphor Media]

Re: Search Icon showing as Letter "j" instead of Magnifying Glass

Check your global Head template and look for:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.css" rel="stylesheet">

[gangadevi]

Re: Search Icon showing as Letter &quot;j&quot; instead of Magnifying Glass

I have the same problem with my site. If that line of code is not in the header, should it be, and where?

Thanks.

[joshpappas]

Re: Search Icon showing as Letter &quot;j&quot; instead of Magnifying Glass

On my installation of that theme, the icons are actually from a font called ElegantIcons. There should be a bunch of font files in a "fonts" folder that are referenced by the "fonts.css" file. Maybe those are missing, or were moved so the reference to them from the CSS file is broken.

Does that help?

Josh

[gangadevi]

Re: Search Icon showing as Letter &quot;j&quot; instead of Magnifying Glass

Thanks Josh. The folders are there, but all four of them result in an error message if I try to open them:

Unable to read the file or the file format is not supported.

The icons show up sometimes, other times, they are all just a single letter.

I've noticed this on other Suivant sites as well.

[joshpappas]

Re: Search Icon showing as Letter &quot;j&quot; instead of Magnifying Glass

Are you saying that the folders give that error when you try to open them, or the font files themselves? You should at least be able to open the SVG files in a text editor. Windows and Mac should both let you open a TTF natively as well.

Also, I just realized that we're talking about the magnifying glass for the search icon, which uses a different custom font that's actually called "Suivant". I was thinking of the image zoom icon, which is also a magnifying glass. My mistake. Do you have the Suivant font files as well?

My "fonts" folder contains:

ElegantIcons.eot
ElegantIcons.svg
ElegantIcons.ttf
ElegantIcons.woff
Suivant.eot
Suivant.svg
Suivant.ttf
Suivant.woff

[Matt Zimmermann]

Re: Search Icon showing as Letter &quot;j&quot; instead of Magnifying Glass

Hi Mark,

When I view your site, I am seeing 404 errors for the Suivant fonts when the browser is trying to fetch them from the "fonts" folder. Can you confirm that those files are uploaded to the server?

[Siamese-Dream.Com]

Re: Search Icon showing as Letter &quot;j&quot; instead of Magnifying Glass

Hi Mark,

When I view your site, I am seeing 404 errors for the Suivant fonts when the browser is trying to fetch them from the "fonts" folder. Can you confirm that those files are uploaded to the server?

Hi there, Matt:

Where would I confirm they are on the server? Could you tell me what path they should be in?

Thanks in advance.

(Oh, and am I to assume then that Bruce's advice does not apply here?)

[Matt Zimmermann]

Re: Search Icon showing as Letter &quot;j&quot; instead of Magnifying Glass

Hi Mark,

If you access your site through FTP, your path should be something like /subdomains/httpdocs/fonts/

As for Gordon's advice, you are correct. This ReadyTheme does not utilize Font Awesome.

[Siamese-Dream.Com]

Re: Search Icon showing as Letter &quot;j&quot; instead of Magnifying Glass

Thanks Matt:

I had to upload the correct fonts. I had originally started out with the Optics Framework. When I applied the Suivant framework, the old optics fonts were still in the httpdocs/fonts/ folder.

That might be something to pass along to people is that if they start on one framework and then decide to try a different framework, they will probably have to copy over some fonts, images and CSS files by hand.

Thanks again, and consider this solved.

[c3idesign]

Re: Search Icon showing as Letter &quot;j&quot; instead of Magnifying Glass

I'm having the same issue. Moved from dev to live and now my icons aren't displaying. Contents of /httpdocs/fonts:

ElegantIcons.eot
ElegantIcons.svg
ElegantIcons.ttf
ElegantIcons.woff
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2
FontAwesome.otf
optics.eot
optics.svg
optics.ttf
optics.woff
Suivant.eot
Suivant.svg
Suivant.ttf
Suivant.woff


Any idea what may be missing or wrong path?

[c3idesign]

Re: Search Icon showing as Letter &quot;j&quot; instead of Magnifying Glass

Just fixed it myself.

[dcatel]

Re: Search Icon showing as Letter &quot;j&quot; instead of Magnifying Glass

Hi,

Just wondering if you could explain the fix.

Thanks
Dave C

[c3idesign]

Re: Search Icon showing as Letter &quot;j&quot; instead of Magnifying Glass

Hi, haven't solved it yet, as I've been busy with family and thanksgiving... but issue is it DOES work with http://www.site.com, but not with http://site.com (no www). Hope this helps you.

[Bruce - PhosphorMedia]

Re: Search Icon showing as Letter &quot;j&quot; instead of Magnifying Glass

cross site scripting issue most likely.

make sure you have this in your htaccess file

RewriteEngine on
RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [R=301,L]


and, your css files (or css file script AKA css.php) are referenced with

<link rel="stylesheet" type="text/css" href="//domain.com/style.css">