Icomoon – implementing more icons

[John Bourke]

Thanks for the great addition of font icons in your themes! I’ve looked at the tutorial videos you have on this (for Preferential and Circumference) and they’re great. On Icomoon, I’ve set the download to encode and embed the fonts in CSS and to use “Class selector” …so I think all i need now to make things work is information on where to put the new style.css (with modified icon).

In the Circumference tutorial you mention that the style sheet contains the code for the font-icons and that you just update the theme. In my child theme directory, there is a style.css sheet that has my custom css for the theme. Overwriting this with FTP is clearly not the way to go ….does it go elsewhere or should i just copy and past it into the existing style.css in the child theme?

(Is it correct to assume the icomoon files (.eot, svg, ttf and woff) in the Fonts directory don’t need to be changed?)

Thanks!
John

[Sushil Adhikari]

Thought I better get to this post topic before I head offline shortly (moving day).

There are a few steps to getting the font icons into the theme as an updated version.

1. When you download the newly updated fonts, open the CSS file and copy everything and then paste it into your child theme stylesheet (make sure this is done above any custom CSS you did).

2. Make sure the path of the font files are like this:

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

3. The font files as you see in the code above, the eot, svg, etc…make sure the font files are copied and pasted into the child theme in a folder named “fonts”.

I’ve never tried this myself so hopefully it follows the rules of child theme overrides and works for you.

[John Bourke]

Thanks for this – I wasn’t expecting any reply for a day or two. I’ll give it a shot and let you know how it goes. Best of luck with the move!

[John Bourke]

Thanks! Worked like a dream (after downloading again from icomoon without embedding the fonts).

In summary for others, here is the whole process:

1. Visit the icomoon site, and select the symbols you would like to include in your font (as shown in the tutorial video for preference and circumference)
2. When downloading the updated font information, use the default download preferences (without embedding the font)
3. Copy the new icomoon font files (.eot, svg, ttf and woff) from the newly downloaded fonts folder to a fonts directory in your child theme
4. Open the newly downloaded styles.css file,copy its content then go to WP and edit your child theme’s css.
5. As mentioned above, paste the modifications into your child theme’s css above your custom modifications.

Note: I deleted most of the new CSS since it duplicates the Circumference theme’s style sheet and just left the modified path information and specific references to the new symbols (example below) in the child theme css file.

.icon-thumbs-up:before {
content: “\e65a”;
}

[Author]

Posts