DEV Community

Add custom icons to Font Awesome

Andrea Stagi on November 17, 2020

In one of my recent projects I used Font Awesome as icon set but I needed to add a new icon not included in the standard Font Awesome's library, th...
Collapse
 
iain_munro_a6fce1b5994096 profile image
Iain Munro

I was hoping that this would be a good article, but it lacks one thing and it is critical, is how do you now make it work. How do you connect the files we just made ?

80% of the work done - what was the point ?

Collapse
 
astagi profile image
Andrea Stagi

Hi Iain, have you tried the example attached? c63px.csb.app/

Collapse
 
ssandison profile image
ssandison

I think he's asking how do you build the custom font awesome library to replace the standard font awesome library.

Collapse
 
mnemosdev_52 profile image
mnemos

Nice article!

Collapse
 
astagi profile image
Andrea Stagi

Thanks!

Collapse
 
ffex profile image
ffex

Nice and useful article! I want to use it in an angular project, it is possible? I don't know how to reference the ts in the project.

Collapse
 
nerdess profile image
Sissi Adamski

nice tutorial, just on thing is a bit unclear to me. what is the purpose of "the unicode point which represents this custom icon (e001)" - thx!

Collapse
 
astagi profile image
Andrea Stagi

Hi Sissi, it represents the Unicode value for the icon and e001 is a higher number than the highest Unicode used in FontAwesome. If you have more than one icon and Unicode value is relevant for you, then you have to assign a different Unicode value for each icon (e001, e002 ...).

Collapse
 
lsrael22t profile image
Israel Robles

This is a very useful article, thanks.

Collapse
 
astagi profile image
Andrea Stagi

Thank you 😊

Collapse
 
kaushik94 profile image
Kaushik Varanasi

This helped me in my project. Thanks for sharing.