×
Back to book

Custom Icons

This article shows you how to create your own icon fonts and how to use them in your application.

By default, Codebots projects are packaged with our Lightning Icons set. However, you can choose to extend replace the Lightning Icons and use your own icon-font.

In this demo, we will be adding a custom icon to the Codebots Zoo Project. If you want to follow along, you will need to download the project and the icon:
zoo.svg

Firstly, we will need to convert our SVG to an icon font. We recommend Fontastic, but there are many tools available to assist with this.

  1. After logging into Fontastic, select Add More Icons from the top menu
  2. Upload the zoo SVG and return to the home page
  3. Click Modify Fonts and rename the font to zoo
  4. Select the zoo SVG from the New Set and move onto Publish

    Normally, you may wish to modify some of the values in the Customise section but the default values are sufficient for this demo.

  5. Download the custom icon files. Rename the style.css file to zoo.scss.

If these instructions are still unclear you can watch the following video:
https://www.loom.com/share/bc8f7ff54818499b9c8e23e78bf11d67

  1. Move these files into clientside/src/assets, so that the file structure looks like the image below.
    1. Open the zoo.scss file, and modify it to include the following:
@charset "UTF-8";

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

}
  1. Now we need to open the project's icons.scss file, located at clientside/src/app/lib/scss/abstracts/icons.scss
  2. Turn on the protected region [Add your custom icons here], and add the following code import code:
    @import '../../../../assets/fonts/zoo.scss';

Then underneath that you will see an empty map icon-custom: ();. Inside that map add the following:

zoo: "\61"
;

Then assign the $icon-custom-name variable to zoo:

$icon-custom-name: "zoo";
  1. Now, if you use the class icon-zoo it will add our new icon as a before element.