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:
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.
@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 
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!
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?
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:
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:
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:
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.
Thanks for the help...none of this is very relavant. The fact that I had it 404ing on CodePen was a minor mistake, and I am not loading them from my server locally. @deontbenton I really appreciate the explanation though I already understand most of what you wanted. I was really trying to go for the :before method via the class names...as I have had made this work before. I was trying to figure out if I made a silly mistake but I guess I haven't, and I'll just have to figure something out. @Chrisburton I didn't actually experience any difference in your version, still not seeing the icons show up, so I'm assuming it's my problem. However it still irks me, because that other time I made icon fonts work...it still works. Oh well, thanks for your help guys.
ok well I fixed that. I really would like the use the :before method but it's not working. You have added in the spans with the unicode whatevers. I don't really want to do that, but if it's the only solution...
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
Also, Shop Talk, for that matter, is not showing the icons for me.
Screenshot of Shop Talk in Chrome 23
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
Oh look...now shop talk's icons work but mine still don't.
Link to site?
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
You need to upload the font files for me to help you.
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?
@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
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!
@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.
sure...look now.
@knittingfrenzy18 The URL of the icon fonts is 404. That might be the problem.
Fixed. http://codepen.io/chrisburton/pen/jDcJe
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?
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.eotMine
http://knittingfrenzy18.webatu.com/files/fonts/icomoontmp/icomoon.eotRemoved the
:beforepseudo selectors and added the following: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:
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:
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:
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.
Hey guys,
Thanks for the help...none of this is very relavant. The fact that I had it 404ing on CodePen was a minor mistake, and I am not loading them from my server locally. @deontbenton I really appreciate the explanation though I already understand most of what you wanted. I was really trying to go for the :before method via the class names...as I have had made this work before. I was trying to figure out if I made a silly mistake but I guess I haven't, and I'll just have to figure something out. @Chrisburton I didn't actually experience any difference in your version, still not seeing the icons show up, so I'm assuming it's my problem. However it still irks me, because that other time I made icon fonts work...it still works. Oh well, thanks for your help guys.
You don't have to give up. We can still help you debug the issue.
If it makes any difference, this is what I see: http://cloud.chrisburton.me/Lrqn
And I'm getting this: http://bit.ly/Zqa0nE
It's obviously my problem...
@knittingfrenzy18 From what I see in your codepen, the URL is wrong. You have two forward slashes in the directory before "files".
See here: http://cloud.chrisburton.me/Lxz6
The problem isn't Chrome, it's your code.
ok well I fixed that. I really would like the use the :before method but it's not working. You have added in the spans with the unicode whatevers. I don't really want to do that, but if it's the only solution...
@knittingfrenzy18 If you have dropbox, message me the entire link to the folder. Or zip it and message me for my email.