#ui_ux_design

Overview:

Icon fonts are just fonts based on CSS and LESS which can be modified using CSS, but it contains more than just fonts. A font can contain only letters and numbers, but a font icon can also contain glyph & ligature. It is popular in web designing as it can be styled using CSS, the same as a regular text. As it is a vector it is scalable and it is less in size so it loads quickly.

Using a font icon in our project can make a good User Interface as well as it will give the best User Experience to viewers, but getting the right choice of icon suitable to our project is so difficult to find and it’s harder to customize existing icons. Customizing icons for our project can give more impact on our project, so today we will see how to create our font icon for our project.

Creating Icon:

For creating our icon, we will require only the SVG icon or shape that are required for our project, after getting our SVG files, follow this link: https://icomoon.io/app/#/select.

Visiting this link will open a dashboard to manage your new projects as well as existing projects.

So for creating a new project click on the left-hand corner Menu and select New Empty Set.

After selecting a new empty set, you will get empty set for adding icons.

Click on the right side menu icon to add your icon:

Then, click on the menu icon, it will show a list of options, select Import to Set option.

Select all your SVG files or icons that you need to convert to icons for your project.

After selecting, it will add all your icons to your empty set, select all of them to convert it into icons.

After selecting all your icons click on the Generate Font tab on the bottom.

After that, click on preferences to change font name, CSS class prefix, CSS class suffix, and other information regarding your “font set” and close it.

Now, click on the download button located at the bottom tab to download your icon library.

Once it is downloaded, extract it and you will get the list of files and folders.

Open demo.html file to see cheatsheet regarding all your fonts along with its code, also you can import your fonts into your local system by installing the TTF font and you just need to copy the text entered into the textbox at the right-bottom corner of each glyph in demo.html, also you may find the character inside the textbox is invisible but it is still copyable, just copy and paste it into your editor.  See this guide for more info: https://icomoon.io/#docs/local-fonts.

You don’t require any of the files located under the demo-files directory while you are importing the generated font in your projects.

You can also add more fonts into your set and also update your settings by importing selection.json files into the IcoMoon app using the Import icon option in the dashboard.

Importing fonts:

Extract that zip file you have downloaded, it will have a list of files and directories.

Select fonts folder and style.css and add to your project.

Import style.css to your html file using link tag.

<link rel=”stylesheet” type=”text/css” href=”style.css”>

How to use custom fonts:

To use fonts simply add an icon where you want to add it using <i></i> tag and assign a class belonging to that icon.

<button><i class=”icon-Play”></i></button>

As you can see the output here:

Without styling:

With styling:

Conclusion:

I hope that you will find this blog helpful in creating your font icon and you can use your custom font icon into your upcoming projects.