Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Icon Fonts having a hard time with Chrome 23

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #41605

    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

    #119055

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

    #119087
    chrisburton
    Participant

    Link to site?

    #119089

    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

    #119090
    chrisburton
    Participant

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

    #119093

    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?

    #119094
    chrisburton
    Participant

    @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 ``

    #119121

    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!

    #119125
    chrisburton
    Participant

    @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.

    #119141

    sure…look now.

    #119148
    chrisburton
    Participant

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

    #119149
    chrisburton
    Participant
    #119154

    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?

    #119157
    chrisburton
    Participant

    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;
    }

    #119174
    deontbenton
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.