icons missing

Note – if you really want to “debug” this you would need to

1) specify which OS version you’re using on your computer, the browser version, what anti-virus or anti-malware you’re using (both Avast and Symantec have wonky issues from time to time) – try turning them off to see if that causes the issue. Don’t use “branded” versions of web browser provided by an ISP like TimeWarner, etc. Use the un-branded versions of web browser.

Turn off ANY “ad blocking” software.

2) be sure to run a full anti-virus scan, clear temp files from your Windows system if running Windows, fully clear the cache in your web browser(s).

Check the theme forest demo of the theme, check the thread where somebody is again suggesting “post your sites here” to see different sites, and see if icons appear or not.

If several people post their setups here, one might be able to determine the commonality of the culprit as to why “a few” people are having this issue while the majority do not. I don’t think anybody would be buying these themes if all the icons were broken in the demo, for example.

That’s about all I can think of at this point.

I am from California.
You are right, I can’t see icons on the demo http://demo.tagdiv.com/newsmag/. However, I CAN see other sites using icon fonts via same browser (Chrome) with setup and plugins unchanged, for example:
http://themeforest.net/item/voice-clean-newsmagazine-wordpress-theme/9646105
http://themeforest.net/item/newsline-responsive-news-and-magazine-theme/9614971
http://themeforest.net/item/top-news-wordpress-news-magazine-theme/9359816
Of course, I CAN see icons on themeforest.net.
Might be something wrong at my side, but what it is? I even disabled all extensions, emptied cache, in Chrome, just the same.

• This reply was modified 11 years by handiso.

Hm. Maybe in Chrome run one of the tools to find the external elements being loaded.

Or perhaps run a test of the order things are being loaded in browser.

A QUICK TEST …..

What is REALLY interesting is running test in GTMetrix for this page
http://demo.tagdiv.com/newsmag/td-post-the-oriental-experience-chew-pan-asia-cafe/

if I look at the screen shot, of rendered page, I see the icons (!)
http://gtmetrix.com/reports/demo.tagdiv.com/bprBn5yY
( AND MAN DO THOSE EXTERNAL ELEMENTS KILL THE PAGE SPEED!! )

HOWEVER: running the home page for demo, I do not see the icons loading in the screen cap:
http://gtmetrix.com/reports/demo.tagdiv.com/NrOC7oWs

For those tests, the engine is emulating:
Test Server Region: Vancouver, Canada
Using: Firefox (Desktop) 25.0.1

Thanks for the tips. That means I am not alone.:)
When I run the test on GTMetrix for the same page, I can see the icons. Really weird.
Actually my working computer is the only one on which some browsers (Chrome, Opera, and old version IE) can’t see the icon font from newsmag theme. So far. From here, I can see icon font in any (so far) wordpress theme except Newsmag.

I know for running the Font Awesome font on our main business page I went through this in the springtime, where FA 3 would randomly not load in IE from Amazon’s CDN even with the CORS in place, all the additions for file types added to htaccess for fonts, etc. (actually I didn’t try adding the font type to htaccess… hm….), and finally gave up and loaded from our own domain.

In our case, we put the call to the FA icon font at bottom of our style.css but loaded before the external Google fonts.

I know some browsers do have issue loading too many fonts, and that can “time out” on the page rendering (or so I’ve been told).

I will need to look at the style sheet or the files to see WHERE exactly the icon font is being loaded, and possibly move to bottom of the style.css if not there already, as that *might* resolve the inconsistent issues as it did for me on our main website (not running WordPress btw).

It was super annoying and I wasted many an hour back in April or May suffering through that. FA4 didn’t matter … was “when” the icon font was loading in the “stream of things.”

LUCIAN … if you’re monitoring this at all,
can you tell me WHERE the icon font is being loaded… is it coming from style.css, or from a dependent file being loaded on the fly ?

On our site when we were having issues with the icon fonts as well as Open Sans loaded locally, we added this to our htaccess for stupid web browsers

# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg

This is likely *not* needed, but somebody who can’t see the icons on their own site could try adding that for laughs and see what happens.

CDN SHENANIGANS:

For those on CDNs, this was the code we added to htaccess in addition to CORS rule at CDN to allow fonts to load at all off CDN vs local domain

<FilesMatch "\.(ttf|otf|eot|woff|svg)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

and of course this applies to Apache server; if running something else can’t help ya.

Doesn’t work on the demo, nor my site. Disabled all my chrome plugins/cleared cache from beginning of time and purged cache with cloudflare.

Both the sites mentioned above – same issue.

My website in question is : http://ladgeneration.com/

Printscreen of both the demo and my site: http://imgur.com/bzsHIqt

Again. Weird. I can see the icons on http://ladgeneration.com/ perfectly fine in ALL browsers, Mac (Mavericks, and new Yosemite), PC (Win7/64, IE11 and Chrome), iOS across three systems, and iPad Air/iOS 7 latest.

I am not using Firefox, however, as I hate it.

Firefox *does* have some issues with CSS, which we ran into with our ecommerce system which *no* other browser has, but I didn’t test the icons with latest version. I think I have that on the Mac system with Mavericks, so I will check that when I have time juuuuuuust because I’m curious.

There is no good reason NOT for the icon font to load properly.

But obviously enough people are NOT seeing the icon font for it to be more than a “non issue.”

OK, no pix no truth. 🙂

No, I Can’t!
Newsmag demo:
http://www.screencast.com/t/kUkOkgWnkg
GA-GA.com:
http://www.screencast.com/t/t2ctTqvC9ab
ladgeneration.com:
http://www.screencast.com/t/6INjhXkcj

Yes, I can!
absolute theme:
http://www.screencast.com/t/mrAcgfs7whgJ
….

I like Newsmag theme, but how could I purchase/use it without the icons?

Showing a different theme is irrelevant as its not using the same font unless both are using font awesome or bootstrap 3 framework default icon font.

Very very strange.

For those using chrome, and not seeing icons… What error are you seeing in the console?

Well, I am not here to show a different theme or something. I just want to say, is there any chance something wrong with the theme?
Theme Newsmag uses custom icon font “newsmag” which made from FA I believe. So it’s not easy for me, or anyone, to compare it with other themes.
All right, let’s compare it to itself. I don’t own this theme, so I got a copy from someone, for test only, of course. (Sorry about that if tagdiv team do mind this.)
Here is a quick test. I just put 2 icon fonts into the theme Newsmag, one is official Font Awesome 4.2, another one is my custom font, icons from icomoon or flaticon, compiled by icomoon, compatible with IE 8-11. My sites use icon font except the one using theme Newspaper.
http://www.screencast.com/t/I0QhQxZ5RZsD
I can see two search icons but not the one from font “newsmag”. Is this make any sense?

okay, this “might” be the issue, might not…

in looking at the /includes/less_files/font-icons.less

I did find this …

@font-face {
font-family: 'newsmag';
src: url('@{td_css_path}images/icons/newsmag.eot?6');
src: url('@{td_css_path}images/icons/newsmag.eot?6#iefix') format('embedded-opentype'),
url('@{td_css_path}images/icons/newsmag.woff?6') format('woff'),
url('@{td_css_path}images/icons/newsmag.ttf?6') format('truetype'),
url('@{td_css_path}images/icons/newsmag.svg?6#newsmag') format('svg');
font-weight: normal;
font-style: normal;
}

While on the “face” of it (typography pun 🙂 ) … that “should” work, and follows modern practice … the ?# might be breaking somewhere, but doubtful.

e.g.,
normal use:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

By contrast this is how I load the Font Awesome font on our main business site at bottom of the main minified CSS file:
(un-minified for easy read .. without the FA style classes….)
@font-face{font-family:'FontAwesome';
src:url('/assets/fonts/fontawesome-webfont.eot');
src:url('/assets/fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'),
url('/assets/fonts/fontawesome-webfont.woff') format('woff'),
url('/assets/fonts/fontawesome-webfont.ttf') format('truetype'),
url('/assets/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}

Putting it at bottom of our main style.css worked best for us as it wasn’t being loaded through a separate load/include function.

So, if somebody – who can’t see the icons on their own website – wants to try putting the CSS for the font at bottom of their style.css file, have at it, then re-testing their website to see if the fonts work. Not sure where the less file is being called from … possibly the speed booster master file or functions.php.

I can’t test as I am not having the “I don’t see icons” issue.

As the test result shown in my last reply, maybe something wrong with the font “newsmag”? Anyway, I re-generated the font and the problem is fixed.
HOW:
1. go to https://icomoon.io/app;
2. button “import icons”, import from newsmag.svg (in /images/icons/),
3. select all icons;
4. button “generate font”, button “download”;
5. copy the 4 files (.eot, .svg .ttf .woff), in “fonts” folder in the downloaded zip file, rename icomoon.* to newsmag.*, replace old files, done.
For your reference ONLY.

Okay… that was too obvious that maybe one of the font files was bad and thus not loading for those particular browsers using the broken font, while “most” folks are likely loading the woff file, one might presume that one was fine. So, possibly eot file. Good idea on the re-render of the fonts (!). (and I hereby facepalm myself …)

That is something Radu may want to look at since enough people are having an issue with this, it has in fact become a real issue, and not imaginary or plugin related, cache related, etc.

Anecdotally, the icons do show up in
* Firefox 18.0.2 on Windows XP (!); and site works too… which is pretty damn impressive.
* In IE 8.0.06001.18702 on Windows XP the icons do show up. Site is horribly slow, likely as the Google ads seem unable to sort out what to do with IE8/WinXP these days. Actually, I can see in bottom browser window it’s downloading the .eot fonts from Google, also slowed page down quite a bit. Argument for loading that stuff locally, if you care about WinXP and IE8 🙂

Handiso, that seems like the right fix, but when I followed your steps, it still returned a lot of Chinese fonts and blank boxes. Am I supposed to manually change each one over to a new font and then download?

Worked for me thanks.

Wait, I didn’t get it to work. Is there a way to load the icons locally?

Apparently after I check it from several different browsers and different operating systems, I found something strange. Social media icons in the header does not appear when I access my site via Google Chrome and Mozilla Firefox browser on Windows 7, but it’s running normally in the Internet Explorer. Though I’m using the latest version of the browser. Additionally, social media icons in the header also look normal when I access my site via Mozilla Firefox in Ubuntu 12.04 LTS. Hopefully this problem resolved soon. 🙁

@masbay93
did you try to re-render the fonts as per the possible solution provided?

@Christopher @Lucian, I’ve followed instructions given by handiso, but the result is the Chinese fonts appear on my site… 🙁

@cityslicker444 @masbay93:
at step 3: select all icons, make sure you select only icons imported from newsmag.svg.
you may try the fonts I regenerated, if you want.
https://www.dropbox.com/s/nn6n04z39g8ml2v/newsmag.zip?dl=1

• This reply was modified 11 years by handiso.