Difference between BS and FA icons?

Hi,

i’ve used some icons of the “Font Awesome”-font and some of the BS ones.

Is there a difference between them?

Looks like using BS icons are “hardcoded” as SVG into the HTML while FA icons are placed as char inside and all font-files are in the export.

This means 150 - 200 kb additional stuff to load… in opposite to BS icons which are inside the HTML and not all icons included, only the used ones (as SVG).

Is this true? If yes → i would try to use BS icons only… but in some cases the FA icons are nicer…

Thanks!
Rom

A few years ago the trendy way of including icons was by using icon fonts, where the icon data is embedded as glyphs inside a web font. The first generation of icon libraries we included in Bootstrap Studio follow this format. Later the design community realized that icon fonts are not a good idea and migrated to SVG. The later icon libraries we added follow this format. As a result, Font Awesome 4 and earlier are icon fonts, whereas Font Awesome 5, Bootstrap Icons and a few others are SVG.

You can freely mix and match SVG icons from different sets without performance penalties, but if you use an icon font it is best to stick with it since you’ve already paid the overhead of including the font file in the page.

Maybe it will be a good idea to add some type of badge or mark in the Icon Dialog to make it easier to tell svg and font icons apart.

2 Likes