SitePoint Sponsor

User Tag List

Results 1 to 19 of 19

Thread: Icon Issue

  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    675
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Icon Issue

    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.

    http://autoonecars.ca

    Thanks,

    Mike

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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..

  3. #3
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    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 auto-onecars.com/wp-content/themes/auto-one/css/component.css:
    Code:
    @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..ttf") format("truetype"), 
    		url("../fonts/Auto-One-Icons..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.

  4. #4
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    675
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.

  6. #6
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    675
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    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!

  8. #8
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Typo Erratum!
    • in the auto-onecars.com (and not in the autoonecars.ca)

  9. #9
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    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?

    1. All browsers can handle it.
    2. No need to include all icon font variants (and no delay in rendering; it seems embedded fonts are screwing down the performance).
    3. Bonus: position fine tuning (for instance: centering) of the icons can be done with 1px precision.
    4. 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 a1-sprite.png is 11kB, so for all 12 images it will about 40kB (and only 1 http-request); that is not much to download.
    5. No problems for the responsive layout.

    The css can be:
    Code:
    .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: a1-test.htm
    ________
    *) Note: with the clip-property also a foreground image can be a sprite (but inserting the clipped images is not without difficulties).

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mbond5 View Post
    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
    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

  12. #12
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    675
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    I take it is this code...

    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

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    <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.

  14. #14
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    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 a1-test.htm 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: a1-test-2.htm
      (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):
    HTML Code:
    <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: http://clba.nl/service-parts/complete-care
    • 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.

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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?

  16. #16
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    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.

  17. #17
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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/htm...nk-crossorigin

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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/htm...nk-crossorigin
    Interesting but not sure I understand the full implications of that (my eyes always glaze over when I read the specs ).

  19. #19
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    yeah I really want to see an example of the attributes in use, myself.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •