Description

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

In order to implement this recipe, you will need the ability to upload files directly to the file structure of your Rock server, whether that's through FTP, Remote Desktop or some other means.

Credit

This recipe began life many years ago as a blog post by Mark Lee on a website called "Shoulder the Boulder". From my understanding, as the Rock community grew and the Recipes feature was released, there was no longer much of a need for Shoulder the Boulder, so the site was taken down. Ever since then, the only way to find old articles from the blog has been to search for them using the Wayback Machine on Archive.org.

Mark's article in particular has been such a huge help for me and many others in the community over the last few years that I felt it absolutely needed to be brought back and preserved in the form of a recipe. A majority of the content in this recipe was taken (with Mark's blessing) directly from his post with a few of my own modifications and updated screenshots. So please, give Mark most of your thanks for this one!

If you're interested in adding custom icons to your check-in labels, be sure to check out Stephen Cracium's recipe titled Install CUSTOM Icon Font on Printer Label.

How-To

Create Some SVG Icons

The first thing you will need are icons. Your icons will need to be vector images (JPGs, GIFs, and PNGs won’t work here.) You can create these with any vector program such as Adobe Illustrator (Paid) or Inkscape (Free). Inkscape is an open source tool that is perfect for creating vector icons. You will need to save your icons in the SVG format.

Generate Font Files

After you have your icons ready head over to icomoon.io. IcoMoon is a free online tool that you can use to turn your SVG files into an icon font that can be used in Rock.

1. Start by clicking the IcoMoon App button in the top right hand corner of the website.
   

   

2. 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 start importing your icons. Browse to where you saved your SVG icons and select the ones you want to upload.
   

   

3. Your icons will show up in IcoMoon, but they won't be included in your project until you 'select' them. Make sure the selection tool is active at the top and then click on the icons you want to include in your font.
   

   

4. Once you're happy with your selections, click the Generate Font button at the bottom of the screen.
   

   

5. You icon font will be ready to download, but it isn’t configured in a useful way. Click on the gear icon () next to the download button in the lower right to open the font preferences.
   

   

6. Set the following values:
   • Font Name: CustomIcons
   • Class Prefix: ci-
   • Generate preprocessor variables: Less
   • CSS Selector > Use a Class: .ci

   You can technically use anything you want for the Font Name, Class Prefix and CSS Selector values (as long as they're not the same ones that Font Awesome uses.) You'll just need to make adjustments accordingly in the remaining steps.

   I also like to fill in the Version and some of the Metadata fields. Version helps to be able to identify future updates you make to your icon font. Just make sure to increment the version number each time you make changes and generate a new font.

   

   Click the close icon () at the top right when you're done.

7. Click the Download button to download a ZIP file of your new font files.

Optional: Download Your IcoMoon Project

IcoMoon only allows you to save your icon font project if you pay to become a premium member. Instead, you can download the details of your project as JSON file and then import it again in the future if you need to make updates.

1. Click the hamburger menu () at the top left and choose Manage Projects.
   

   

2. Rename the "Untitled Project" by clicking on the project name and replacing it with whatever you want.
   

   

3. Download your project using the Download link at the far right.
4. Keep the downloaded JSON file in a safe place for the future.

Later, when you need to make changes to your icon font, just come back to IcoMoon and choose the Import Project option to upload your JSON project file. Once it's imported, just click on Load to pick up right where you left off.

Install The Font

The downloaded ZIP file will include 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 places in your Rock file structure.

1. Extract the contents of the ZIP file to a folder on your computer.

2. Before uploading the files to your Rock server, you'll need to make a modification to variables.less. Open the LESS file in your favorite text editor. At the top you'll see a line that says @icomoon-font-path: "fonts";.

   Change that line to @icomoon-font-path: "../../Assets/fonts/CustomIcons";

3. Connect to your Rock server and browse to the [Rock]/Assets/Fonts folder. Create a new sub-folder named CustomIcons. Upload the contents of the fonts folder from the ZIP file to the new folder.
   

   

4. Browse to the [Rock]/Styles folder on the server and create a new sub-folder named CustomIcons. Upload the styles.less and variables.less files to the new folder.
   

   

5. Next you'll need to tell each of your Themes in Rock to include your custom icon font. Log in to Rock and go to Admin Tools > CMS Configuration > Themes and select the Rock theme.
6. Add this line at the top of the CSS Overrides box: @import "../../../Styles/CustomIcons/style.less"; and save the theme.
   

   

7. Repeat the previous step for each of your themes that will need to use your custom icons. If you update your icon font in the future, you'll just need to recompile each of your themes to be able to use the updated font.

Start Using Your Icons!

Finally you can use your custom icons. Instead of using the normal fa fa-[icon] formula, you will use ci ci-[icon]. Just replace [icon] with the name of whichever icon you want to use.

Unless you made changes on IcoMoon before downloading your font, the icon names should be the same as the original SVG file names but with dashes instead of spaces. You can see a full list of all of your icon names either on the IcoMoon Generate page or by opening one of the LESS files that you downloaded from IcoMoon.

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 to your project just as easily.

Bonus

Now that you have your very own custom icons set up, you might also want to check out my Icon Picker recipe that allows you to search all of your available icons from both Font Awesome and your new custom icon font from anywhere there's an "Icon CSS Class" field in Rock.

Follow Up

Please don't hesitate to leave a comment below or hit me up on Rock Chat (@JeffRichmond) if you have questions or find any issues with this recipe.

If you come up with better or more efficient ways of doing anything in this recipe, please let me know. Thanks!

Change Log

• 2022-11-11 - Initial Version
• 2024-04-23 - Added a link to Stephen's check-in label recipe