Grow your CSS skills. Land your dream job.

Icon Fonts having a hard time with Chrome 23

  • # December 26, 2012 at 1:54 pm

    Hey guys,

    I’m currently using Chrome and developing a personal site for my grandpa!

    Thanks to Chris, I’m using icon fonts to enhance the navigation on the site. Thing is, it isn’t working. I have made a custom font using icomoon (so helpful!) and have used their code, straight in, and have attempted implementing them using the class names. They are not working…They show up thus so:

    [Screenshot of [unstyled] navigation, with icoMoon classes](http://www.jetScreenshot.com/demo/20121226-jq7-5kb.jpg)

    Also, Shop Talk, for that matter, is not showing the icons for me.

    [Screenshot of Shop Talk in Chrome 23](http://www.jetScreenshot.com/demo/20121226-uxa-81kb.jpg)

    I have used the Inspect Element to see that Chrome has chosen to use the svg version, but it’s not displaying for me.

    For that matter, now that I’ve checked, it doesn’t work on any of the browsers, either displaying a blank space before the link, or showing the same as Chrome. (now that I think of it, I probably have old versions of the other browsers, though, so don’t lean too much on this fact.)

    Given the code I’ve used is entirely from IcoMoon, I hope you can help me, as I am developing locally. If needed, I will upload to my site so you can view it live. As far as I can tell, background declarations and floats should not be conflicting with the code.

    Please help,
    Red

    # December 26, 2012 at 2:08 pm

    Oh look…now shop talk’s icons work but mine still don’t.

    # December 26, 2012 at 6:20 pm

    Link to site?

    # December 26, 2012 at 6:43 pm

    It is local right now…since it is so undeveloped at the minute, I can codepen the part that should matter. Grandpa kinda wants the project secret :P

    some unnecessary junk probably left there as I’ve just bored it down to what’s needed for the demo:

    http://codepen.io/knittingfrenzy18/pen/lrACz

    drat for long domain name and long path to fonts :P

    # December 26, 2012 at 6:58 pm

    You need to upload the font files for me to help you.

    # December 26, 2012 at 8:52 pm

    I did! This is my problem…they aren’t displaying correctly.

    EDIT: oic, i didn’t bother to upload quicksand but I have done the icomoon. Maybe that threw you off?

    # December 26, 2012 at 8:59 pm

    @knittingfrenzy18 So what is the correct file path to the uploaded font files, then? Your CSS is showing relative file paths.

    Edit: Oh ok, I see. When you created the icon fonts, they give you a special page with the ASCII character code. Can you find that and upload it? It should be something like ``

    # December 27, 2012 at 10:29 am

    https://lh.rs/uJMT7QVJMpqN

    There is the whole folder that icomoon spit out for me. I was assuming you didn’t want the html file without the css and js or whatever they threw in there…so i just chunked in the whole folder. Go localhostr!

    # December 27, 2012 at 11:28 am

    @knittingfrenzy18 It’s empty for me. Anyway, just paste all those ASCII character codes in Codepen, on the Javascript side and just comment them out.

    # December 27, 2012 at 3:33 pm

    sure…look now.

    # December 27, 2012 at 4:14 pm

    @knittingfrenzy18 The URL of the icon fonts is 404. That might be the problem.

    # December 27, 2012 at 4:20 pm

    Fixed. http://codepen.io/chrisburton/pen/jDcJe

    # December 27, 2012 at 6:58 pm

    I’m not sure what you mean by 404ing…and for me, at least, your codepen doesn’t look any different than mine. Maybe it’s a problem on my end? Could you tell me what exactly did you fix in yours?

    # December 27, 2012 at 7:10 pm

    404 means invalid URL/File not found.

    All I did was fix the URL, changed the CSS and HTML.

    Yours: `http://knittingfrenzy18.webatu.com//files/fonts/icomoontmp/icomoon.eot`

    Mine `http://knittingfrenzy18.webatu.com/files/fonts/icomoontmp/icomoon.eot`

    Removed the `:before` pseudo selectors and added the following:

    nav ul li {
    font-family: “icomoon”;
    padding-right: 10px;
    }
    nav ul li span {
    margin-right: 10px;
    }

    # December 28, 2012 at 1:03 am

    Here’s a breakdown of what you should do if you’re working locally and don’t want to upload the fonts to the server to see them in action (in as much detail as possible):

    You’ll first want to go to icomoon.io and select the fonts you want to use. Once you’ve selected the fonts, you’ll click the font button at the bottom of the page to generate the fonts. At this point, you should be on a page that displays your fonts.

    Once you’ve made it to this page, you’ll want (although it’s not necessary) to assign a Private Access Area number to your fonts. To do this, simply click on the down area in the grey area just above each font and select the pink-color PUA title. This will apply a PUA to the icon. You’ll want to hit the down area and select PUA for each icon.

    Once you’ve assigned a PUA to each icon, you’re now ready to “Download” your fonts. Once you press the Download button, a zip folder should download onto your computer. In this zip folder, you’ll find a font folder, an index.html file, a license text document, a JavaScript file, and a CSS file. To get the fonts to work locally, all you’ll need to use is the CSS file and the index.html file.

    You’ll now want to copy the entire fonts folder to your project folders. If you have an image folder already created, copy the folder into your images folder. Inside the font folder provided to you, you should see an SVG image file, a WOFF image file, an EOT image file, and a TTF (True Type Font File) image file. Make sure you copy ALL of these files over to your existing images folder, and the safest way to do this is simply to copy the entire fonts folder to your images folder. The reason you want to copy this folder into your existing images folder is because you are going to be calling up those images in your existing CSS file you’re using to style your grandfather’s website.

    You’ll now want to open the CSS file in the text editor you’re using (e.g., Notepad++, Dreamweaver, Komodo Editor, etc.). Once the file is open, you’ll want to copy (control+C if you’re using Windows) the entire @font-face declaration, which is located at the top of the CSS file they provided to you. Now, you’ll past that declaration somewhere in your existing CSS file, perhaps even at the top of your CSS file.

    Once you’ve done that, you’ll want to add a span element directly before the element content. So, for example, if you want the icon to display before the word ‘Home’, put the span directly before home. Here’s what it might look like once you’ve done that:

  • Home
  • We’re almost done!

    Now that you’ve done the above, you’ll want to go into their CSS file and copy the second declaration and past it into your existing CSS file. It should be the [data-icon]:before declaration. Now you’ll want to return to the first declaration you copied over, the @font-face declaration. Because you copied the font folder they provided into your images folder, you’ll want to call those icons a bit differently than how they’ve called the icons.

    You’ll notice, in looking at the src properties in the @font-face declaration that each src property is calling an image with a different file extension. For example, the first src property in that declaration is calling an .eot file. You’ll want to maintain the same convention when you call the icon fonts in the folder folder, which, at this point, is located in your images folder.

    In your CSS (not the one you have open that icomoon provided to you), you will call each image like so:

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

    The above bit of code is simply saying that you want to call the fonts that are located in the fonts folder, which itself is located in the images folder. Once you’ve called up the images correctly in your CSS file, you’ll now want to open the HTML file they provided you. Once this file is open in the browser, you should see the correct data-icon value for each of the fonts you downloaded. With these values in hand, go back to your CSS, and for each span element you created, paste that value in the data-icon attribute area. For example, you might have:

  • Home
  • At this point, you should be pretty much done. As one last note, if you want to use multiple icons next to multiple titles, just add that many span elements.

    I hope that helps.

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".