Grow your CSS skills. Land your dream job.

How to implement icon fonts

  • # December 16, 2012 at 2:44 pm

    I’m interested in including icon fonts on my personal blog, but I’m not too sure what I should do once I’ve picked out a few icon fonts on http://icomoon.io/.

    Do I download the font package and place that folder in the image folder within my ‘site’ directory folder? Do I even need to download the font package and place it in any such folder? Do I link to the icon I’m interested in using by pointing to its directory location?

    I’m grateful for any suggestions at this point.

    # December 16, 2012 at 3:06 pm

    I guess a better question is can someone explain the implementation process from what should be done on http://icomoon.io/ to whether the font package should be downloaded to how to link to that font in one’s website?

    # December 16, 2012 at 3:12 pm

    @posterity576 What files do you have at this point?

    # December 16, 2012 at 3:35 pm

    @chrisburton I chose the font I wanted and went to the bottom of the page and clicked the Font button. When I did that, I was brought to a page showing the four icons I downloaded.

    Here is where I’m a bit lost. I’m not too sure if I should map those four icons to a PUA unicode or use a symbol for mapping. Anyway, when I mapped my icons to a PUA, I selected the download button to download those fonts to my hard drive.

    The folder that downloaded on my computer was a zip labeled ‘icomoon69674′, and inside that folder was a ‘fonts’ folder and ‘index.html’, a text document, a JS script file, and a style sheet. This where I’m at currently. I’m not too sure how to go about actually implementing the fonts into a webpage.

    I’m essentially looking to include those icons in before the element content within each list item. Sorry for the diffuse response.

    # December 16, 2012 at 3:57 pm

    Upload the font folder and CSS file to your server. Rename the CSS file they gave you to typography.css. Then, in your regular CSS file for your site, at the very top put `@import ‘path/to/typography.css’ – obviously use the correct path. Let me know when you’re finished with that.

    # December 16, 2012 at 4:05 pm

    Alright, that’s done.

    # December 16, 2012 at 4:08 pm

    Great. Can you link me to both css files?

    # December 16, 2012 at 4:19 pm

    I haven’t uploaded any of my files to my server yet. I prefer developing locally. Do I need to do that in order to get the icon fonts to work? I thought using icon fonts was as simple as downloading them to one’s hard drive and then linking to the icon of choice.

    # December 16, 2012 at 4:24 pm

    I’d prefer that you did so that I can show you an example. I need access to the fonts in the font folder and the css file that comes with it. Although I don’t know the contents of the license so I’m not sure you can do that.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

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