Icon Issue

mbond5 · October 29, 2013, 7:17pm

Hello,

I was went to check on one of my sites and everything was working correctly but when I checked on Safari it was doing some weird things with the three icons up front. The icons are suppose to be circles but now for some reason on Safari they are square. Any reason why this is? I havent touched any of the coding.

Thanks,

Mike

PaulOB · October 29, 2013, 9:22pm

Hi,

The circles above the headings New arrivals, View Inventory and Book online seem to be displaying ok in Safari and Chrome.

In Firefox the little icons in the middle of the circles are missing and it seems the “auto-one-icon” font is not being downloaded in Firefox. It may be a cross-site access issue if you are trying to access them from somewhere else as Firefox doesn’t allow this unless you jump through hoops…

Francky · October 29, 2013, 11:07pm

Hi Mike,
Hé, that is strange.
At my side Safari on WinXP and on Win7 is good, but Firefox (23 on WinXP and FF24 on Win7) doesn’t show the icons in the red circles (a “” symbol instead).

The culprit is in the file [U]auto-onecars.com/wp-content/themes/auto-one/css/component.css[/U]:

@font-face {
	font-family: "Auto-One-Icons";
	font-style: normal;
	font-weight: normal;
	src: url("../fonts/Auto-One-Icons.eot?#iefix") format("embedded-opentype"), 
		url("../fonts/Auto-One-Icons.woff") format("woff"), 
		url("../fonts/Auto-One-Icons[B][COLOR="#B22222"][SIZE=3]..[/SIZE][/COLOR][/B]ttf") format("truetype"), 
		url("../fonts/Auto-One-Icons[B][COLOR="#B22222"][SIZE=3]..[/SIZE][/COLOR][/B]svg#Auto-One-Icons") format("svg");
}

If I remove one of the double dots for the ttf and svg formats, then FF is o.k.

=======
Apart from this, IE10 in Win7 doesn’t show the 3 icons either.
The console says for as well the Auto-One-Icons.eot as the Auto-One-Icons.woff :

“The cross-origin-request for @font-face has failed. The source access is limited.”

I don’t know what this means and how to repair…

=======
Chrome and Opera are o.k.

Note: posting this one, I see Paul O’B has reacted already about the cross-origin-request.

mbond5 · October 30, 2013, 3:03pm

Thanks guys,

Weird now it is working in FireFox, Safari and Chrome.

Cant view in IE10 but can you check to see if it is working there now.

If not how do I resolve the issue.

I didnt even touch anything and then all of a sudden it was working.

Thanks,

Mike

PaulOB · October 30, 2013, 3:23pm

Hi,

It’s not working in Firefox for me on Windows 7. Have you got a re-direct or any cross domain trickery going on?

If not I suggest you upload your fonts to font-squirell and get it all re packaged again and then don’t change a word of the styles they give you.

mbond5 · October 30, 2013, 6:04pm

Hmmm the actual link to the site is auto-onecars.com and works fine when you put that URL in. So it doesnt work when any other one is pointed to it.

Is there a way around this?

Thanks,

Mike

Francky · October 30, 2013, 10:03pm

Hi Mike,

Paul O’B: It’s not working in Firefox for me on Windows 7.

Confirm (not on WinXP either), but you did not remove yet the superfluous dots in the component.css stylesheet (see post #3).
What happens with FF if you do that?

Note: nevertheless strange that it does work in the auto-onecars.ca (and not in the autoonecars.ca): it’s the same stylesheet!

Francky · October 30, 2013, 10:46pm

Typo Erratum!

in the auto-onecars.com (and not in the autoonecars.ca)

Francky · October 31, 2013, 12:50am

How to get IE on the right path with the cross-domain embedded fonts, I don’t know.

But what about simple icon images instead of the icon fonts?

All browsers can handle it.
No need to include all icon font variants (and no delay in rendering; it seems embedded fonts are screwing down the performance).
Bonus: position fine tuning (for instance: centering) of the icons can be done with 1px precision.
As far as I see, the icons have the same dimension on the different pages, so a background-image can be used. *)
If it are background images, then only 1 icon image-sprite is needed.
For the first 3 icons the [U]a1-sprite.png[/U] is 11kB, so for all 12 images it will about 40kB (and only 1 http-request); that is not much to download.
No problems for the responsive layout.

The css can be:

.hi-icon-autone-car:before {
	content: " ";
	height: 170px;
	background: url(...../images/a1-sprite.png) -4px 50%;
}
.hi-icon-autone-search:before {
	content: " " !important;
	height: 170px;
	background: url(...../images/a1-sprite.png) -180px 50%;
}
.hi-icon-autone-calendar:before {
	content: " " !important;
	height: 170px;
	background: url(...../images/a1-sprite.png) -360px 50%;
}
etc.

Result for the homepage: [U]a1-test.htm[/U]

*) Note: with the [U]clip[/U]-property also a foreground image can be a sprite (but inserting the clipped images is not without difficulties).

Stomme_poes · October 31, 2013, 7:41am

Icons are the Hip Trendy thing these days, so people everywhere suddenly need to use them.

I recently crawled through some horrible code where the designers just knew they had to replace some ordinary letters with some goofy specialty icon font, which were ginormous because they were all loaded as base64 thingies. Bleh.

Icons do have several advantages, as listed ad nauseum all over the web (chris coyier’s got a decent list of Reasons To Use), but the code I saw used none of the advantages and pretty much managed to hit every disadvantage. I’d be wiling to give them a medal for managing that, along with some other creative coding things they did. Never let designers write code, you’ll see stars.

As an aside, we’ve got some fonts loaded using @font-face, and pretty much every browser complains (in the console only of course) that the MIME type for the woffs is screwed up and the browser is making a guess about them. I’m assuming this is intrinsic to the file itself and how it was saved, and have yet to find any decent tool for Linux that lets people just change MIMEs on the fly, which would be jawsome.

PaulOB · October 31, 2013, 10:24am

If you are talking about the cross-domain issue then I already gave you a link to the solution where you have to modify the access control headers

mbond5 · October 31, 2013, 2:39pm

Thanks Paul,

I take it is this code…


# example Apache .htaccess file to add access control header
 
<FilesMatch "\\.(ttf|otf)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

And where exactly do I put this lol

Stomme_poes · October 31, 2013, 3:45pm

<IfModule mod_headers.c> <– if you know you have this module, remove this if-stuff, it makes your requests slower

I dunno if * is recommended actually. But it should let anything in. Otherwise, if that site is definitely the only domain not-yours you’re letting people call to, place that domain instead of the *

Header set Access-Control-Allow-Origin “http://auto-onecars.com”

Unfortunately it seems listing multiple domains doesn’t work in browsers even though it should. So for safetly if you only need one, list that one, and if you need more then you might have to fall back to the *.

That example code looks like either an Apache .htaccess file (something you’d have if you’re on shared hosting) or, if you’re running your own server or VPS, you could just have
<VirtualHost (ip and port here)>
Header add Access-Control-Allow-Origin “http://auto-onecars.com” (you can add or set, if you only have one place headers are set I’d use “set”. If you are putting this origin stuff later in the file then I’d use “add”)
</VirtualHost>

(you might not be using Apache but most servers have some place where you can set things for Headers in a sort of config file)

But in any case, Mozilla means “put these settings on the server”. Sniffing around StackOverflow, it sounds like some people will put that code in their framework if they’re using a backend framework like Rails serving files with headers.

It would be a lot handier to just have the font files on your own domain, especially if your current host is so cheap they don’t give you access to anything.

Francky · October 31, 2013, 6:48pm

Well, maybe it is possible to solve the cross-domain issue.
But I agree with post # of Stomme Poes, that in this case the icon font has disadvantages and no advantages
I should go for the normal image alternative. With the test page [U]a1-test.htm[/U] you can see it works like a charm.

=======
offTopic
When you open the homepage, you see:

First the content part with the 3 pronounced red icons.
Then a jump down of the page, and a big gray rectangle.
In the rectangle a loading image.
Then the first slide with all the embedded movements.
A quick change to the other slides, again with inside sliding parts.
Between the slides: again the loading image.

For me that is much to much dynamics: as visitor I came to see cars, and not a choppy page!

The loading time of the page is pretty long (above 120 http-requests!), especially the LayerSlider is slow (and has no feature to keep the needed height free as long as the first slide is not arrived).
My suggestions:

Set the loading image in the <html> (and hide it for small responsive layouts).
Abandon the loading images between the slides.
Give the temporary gray background of the slider a white color (like the rest of the page).
Hide the content part temporary (in case javascript / the slider is enabled), so the slider has time to get his height.
Then let the content fade in with a small script.
Slow down the changing speed between the slides.
Hide the Google Map area in case javascript is disabled.

This will make the page a lot calmer and more enjoyable to see, in my opinion.

Test: [U]a1-test-2.htm[/U]
(see source code; the changing speed of the slider is not adapted yet)

=======
Ontopic again: new idea!

I see everything is now fine for all browsers on the pages of auto-onecars.com.
Then coming in via autoonecars.ca, the only thing needed is a conditional “hard” redirect to the auto-onecars.com domain (= if incoming domain was not auto-onecars.com, make it auto-onecars.com).
So in the beginning of the head of every page can be added (in javascript numbering, starting with 0):

<script type="text/javascript">
	var loc=location.href;
		if (loc.indexOf('-')!="11" && loc.indexOf('-')!="15"){ // hyphen is not 11th letter in the domain name, nor the 15th letter (in case of www. prefix)
		loc=loc.replace('autoonecars.ca','auto-onecars.com');
		window.location=loc;
	}
</script>

This should work for all incoming pages from autoonecars.ca, so it doesn’t hurt people who have made a bookmark in their favorites to an autoonecars.ca subpage. As soon as they are on the auto-onecars.com domain, they will stay there.

Test: [U]http://clba.nl/service-parts/complete-care[/U]
The test script is adapted for coming from an other domain than autoonecar.ca.
If you disable javascript for this testpage (= similar to started in auto-onecars.com), you stay on the page and can see in the source code it is the complete page with the conditional redirect in the <head>.

No more multiple domain trouble.
Though I prefer the image method.

Stomme_poes · November 1, 2013, 9:10am

the only thing needed is a conditional “hard” redirect to the auto-onecars.com domain

I’m missing something?.. why is this better to do with JS than on the server with a genuine 301?

Francky · November 1, 2013, 11:15am

No, not better; just a practical alternative (though not 100% waterproof; js can be disabled) in case of hosting troubles with .htaccess.
A 301 should be the structural solution.

Stomme_poes · November 5, 2013, 3:58pm

I hadn’t checked up on the old <link> element in a while. Turns out it now has a CORS attribute(s), though I would still need to see an example before knowing how it should work…
http://www.w3.org/html/wg/drafts/html/master/document-metadata.html#attr-link-crossorigin

PaulOB · November 5, 2013, 4:14pm

Interesting but not sure I understand the full implications of that (my eyes always glaze over when I read the specs ).

Stomme_poes · November 7, 2013, 11:04am

yeah I really want to see an example of the attributes in use, myself.