Creating Font Files with Nucleo

We can convert our SVG icons into font files using font creation tools like Icomoon and Nucleo. Afterward, we can easily use them in CSS with the “font-face” and “font-family” properties. Let’s look at how to create font files with Nucleo, which is known for its modernity and ease of use.

Figure 1.

After downloading and installing the Nucleo application, you can start creating an icon set by following these steps:

1. Right-click on the left menu and select “New Set.” Enter the set’s name and click “Create empty set.”

Figure 2.

2. With the relevant icon set project selected in Nucleo, drag and drop your SVG icons onto Nucleo.

Figure 3.

3. Right-click on the project, select “Export,” and then check the “Icon Font” option to complete the process.

Figure 4.

4. The application will create a folder, as shown in Figure 5. You can include the relevant files in your project and use them.

Figure 5.

5. The Demo.html file provides a demo draft of the icons you wish to create, as shown in Figure 6. This file can also be used for documentation purposes.

Figure 6.

Bonus: 

Let’s examine how the Demo.html is created and how the icons are called.

First, the relevant font file is imported into our CSS file. It means adding the font file to the “.css” file using a command like “@font-face { font-family: ‘MyWebFont’; src: url(‘webfont.eot’);”

Next, the application automatically assigns the “font-family: Nucleo” to the relevant classes. The final step is to insert the correct character code into the designated area.

Figure 7.

Each class has the corresponding character codes defined in the “::before” pseudo-element. For example, as shown in Image 8, the class “Icon-alarm-disable-3” is assigned the character code “/ea28”. As seen, each character code represents an icon.

Figure 8.

The character codes may change if you need to update the icon set later (which is not recommended). Therefore, if you need to add an icon to a different HTML element, you can do it as follows:

For example, let’s assume we want to add an icon to an H1 element.

<h1 class=”Icon Icon-alarm-disable-3“> Sample Title </h1>

I define the class relevant to the H1 element where I want to add the icon. Adding the class to the H1 element will ensure that even if the icon character codes change, the same CSS class will be used.

Following the above steps will allow you to easily and practically create an icon set. Although there are different methods for creating icon sets, the steps outlined here will provide a convenient solution.