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 Re: Icon Fonts having a hard time with Chrome 23

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