Custom Font Icons

  • By Mark Lee 2 Years Ago

Rock’s use of Font Awesome is great. You have a library of icons at your disposal. Font Awesome usually has the exact picture you need, but sometimes the occasion calls for an extra special icon. This tutorial will show you how to create and add custom icons to Rock that you can use just like Font Awesome.

The first thing you will need is an icon. Your icons will need to be vector images --JPGs, GIFs, and PNGs won’t work here. You can create these with any vector program. Inkscape is an open source tool that is perfect for creating vector icons. You will need to save your icons in the SVG format. Here is a copy of the Rock logo in the SVG format that will be the example for this tutorial: rock.svg

After you have your icons ready head over to icomoon.io. IcoMoon is an online tool that you can use to turn your SVG files into a font that can be used in Rock. Start by clicking the IcoMoon app button in the top right hand corner of the website. IcoMoon will start you off with some free icons for your icon pack. For now ignore those icons and click the Import Icons button at the top left of the screen to import your icon. Next click on the icons you want to select for inclusion in your font. Finally, click “Generate Font” at the bottom of the screen.

icomoon.jpg
You icon font will be ready to download, but it isn’t configured in a useful way. Click on the gear next to the download button in the lower right hand part of the screen. Change the name of your font to “CustomIcons”. Set the class prefix to “ci-”, and check the generate preprocessor values option for Less. Next click CSS selector and choose “Use a class”. Set the class name to “.ci”. Your settings should look like this.

icomoon.GIF

Close this window and download your font. In your ZIP you will have the fonts that you will need, as well as the LESS files that will display your fonts. You will need to place these files in the correct place to in your RockWeb file structure.


Under RockWeb>Assets>Fonts create a new folder called “CustomIcons” and put in it all of the files from the font folder in the IcoMoon ZIP file you just downloaded.
Next create a folder named “CustomIcons” in RockWeb>Styles and put the files style.less and variables.less in it. You will need to change one line in the variables.less file. At the very top it will say

@icomoon-font-path: "fonts";


You will need to change that to:


@icomoon-font-path: "../../Assets/fonts/CustomIcons";


After this you will need to modify the Font Awesome LESS files to include your custom fonts. In the folder RockWeb>Styles>FontAwesome you will find a file named variables.less. Add the following line to the bottom of it:


@import "../CustomIcons/style.less";

Note: Each time you upgrade Rock, you may need to replace this line.


You are nearly done. The LESS doesn’t do anything yet, it merely tells Rock what CSS to generate. You will need to compile each of your themes to finish the process. This is done from within Rock itself. Go to Admin Tools menu and click on CMS Configuration. Click the Sites button, select Rock RMS, and on the next page click Compile Theme. You will want to do this for any site you want to have custom icons on. Finally you can use your custom icons. Instead of using the normal “fa fa-[icon]” formula, you will use “ci ci-[icon]”. In the case of the Rock icon it would be “ci ci-rock”.

sweeticon.jpg

Go crazy with your custom icons. Icons for your different ministries, icons for your campuses, icons just because you can. And if you don’t feel like making your own icons, IcoMoon has plenty of free icons you can add in just as easy.


@markl