Update to Font Awesome 6, switch to Bootstrap Icons or inline-svg?

[crftwrk]

Font Awesome 6 is already in Beta3. Classes for icons has nothing to do with current installed Font Awesome 5 anymore.

This seems to be the right point to think about to switch to Bootstrap Icons instead update to FA6. Because classes changed and we must change them anyway.

• Bootstrap Icons are lightweight, more than the half zipped size compared to FA.
• Both fonts (FA free) has 1500 + Icons
• After more than 10 years of using FA, BI can bring a fresh, new look.
• We can create a FA5 plugin for fall back if user want to use this.

Font Awesome	Bootstrap Icons
bootscore-main.zip: 2,1 MB	bootscore-main.zip: 851 KB

Icons are used in

• header.php (search, user, cart, nav-toggler)
• footer.php (to-top button)
• functions.php (Breadcrumb)
• searchform.php (search button)
• inc/template-tags.php (comment-link, comments-count)
• css/scss/bootscore/_alerts.scss
• woocommerce/product-searchform.php (search button)
• woocommerce/cart/cart.php (trash icon)
• woocommerce/cart/mini-cart.php (trash icon)

In my opinion, Font Awesome has more visual power.

[Axos11]

My suggestion would be to replace all icons with the .svg version of the bootstrap icon font (all icons are directly available as .svg files also) and separate the icon font implementation to a plugin maybe with an selector for your proffered font which.

I think inline svg would be the most performant in browsers for optimized css and reduced file requests and a non flickering loading process :) (https://cloudfour.com/thinks/svg-icon-stress-test/)

[crftwrk]

Like the idea. But inline svg icons must be adjusted, they do not work like a font. Also not sure if we should ship theme without an installed icon font.

[justinkruit]

I'm personally more a fan of FontAwesome, but that's mostly because I'm biased as I use the Pro version so I have way more variation.

I quite like the Bootstrap icons, but never used them, and I'd still prefer FontAwesome because the icons feel a bit more consistent.

[Axos11]

The reason why I suggested it is just that its a lot to load a full icon font on a page for just around 10 items. Most of the plugins ship with their own version anyways but you can deselect it there.

Improvements I am looking for with the decoupling of the icon font from the theme (we can offer it by plugin or just make a section you can comment in or out without breaking the theme)

Pro in my opinion

• The user has the option to change the icon font without changing too much
• The blocking css size gets smaller (about 150 kb in total ~ 75 for each one)
• The possibility of FOUT is decreased by just loading the text font and freeing up bandwidth

Con in my opinion

• We have to find nice .svg that we like and are allowed to use (Don't have to be the actual bootstrap icons if we don't like them)
• We have to adjust them a little bit to fit perfectly in their size and position (I think I would be willing to do that for the 10 icons :))

Hit me with your thoughts :)

[crftwrk]

I'm getting more and more warm with this idea and agree that it's not necessary to load 1500+ icons if we just use less then 10 of them.

We have to find nice .svg that we like and are allowed to use (Don't have to be the actual bootstrap icons if we don't like them)

We can copy the Font Awesome glyphs or download svg to create own icons https://fontawesome.com/v5.15/icons/bars?style=solid. We must add credits and license.

Still a bit worry to adjust the inline-svg‘s, they must change as well if button style or size changes.

What‘s about this: I used https://icomoon.io many times to create custom icon fonts. We can create a custom font set using FA icon svg's. If we name them like FA, for example fas fa-bars, we can use our own tiny "fake FA" set. Pro of this is that users have to do no changes in their php files. Con is that this is horrible to update if we need a new icon.

[justinkruit]

Inline svgs are actually pretty nice to work with nowadays. Maybe take a look at FontAwesome's JS edition, which replaces the html tag with inline svgs, and also responds to sizes and colors.

I'm also able to create a subset with FontAwesome icons, only including the ones we need. https://fontawesome.com/v5.15/how-to-use/on-the-desktop/other-topics/subsetter

[crftwrk]

Good Idea!

Created a rough sketch of a webfont with only 6 icons icomoon.zip. Just to catch some ideas.

[Axos11]

Inline svgs are actually pretty nice to work with nowadays. Maybe take a look at FontAwesome's JS edition, which replaces the html tag with inline svgs, and also responds to sizes and colors.

I would still prefer a non "extra" request solution but 6 icons is of course way better than all of them ;)

I added a codepen where the color and size of the inline svg (which is a bootstrap icon svg) are already changing with the text. The vertical alignment would need some improvement still but I think we could figure that out as well :)

https://codepen.io/axos11/pen/ZEXEzzj

[justinkruit]

I would still prefer a non "extra" request solution but 6 icons is of course way better than all of them ;)

Oh I didn't mean to use the JS edition, I meant look at their svg code and css they're using for it, and then we can just implement the few styling lines we need to make them work properly.

[Axos11]

I quoted the wrong part, I meant the custom font one, my mistake :D

I tried to find the docs for the fontawesome js part but could't find the according css. @justinkruit is it easy for you to find out what css they are using and how it is different from my codepen?

[justinkruit]

@Axos11 I quickly made an html file which loads a FA JS kit, and added some icons. Here it just replaces the i tags with svg, and put some styling in the head which will make the fontawesome icons work correctly, like we're used to. We can pick from that style tag what we need, and then we're sure all the alignment etc functions like we're used to with FA.
https://small.jkruit.dev/bootscore/fa.html

[Axos11]

@justinkruit thanks,

i adapted my codepen and implemented their alignment adaption ( vertical-align: -.125em; )
Seems to work fine and is actually responding well while changing the font-size.

@crftwrk i like the 3kb of the icon font :) it's good to know that if the inline .svg approach shouldn't work out as planned we have a good fallback!