Font Awesome questions, some icons not showing up

[amillionmiles]

Hi,
I apologize if this is a stupid question, but I'm new to Understrap (using the child theme), and some of my Font Awesome icons are not showing up without using the Font Awesome plugin. I tried using variations of .fa and .fa-solid, and that works for some of them, but not all of them. One example that doesn't work is fa-file-lines. They show up fine with the plugin. I would like to figure out how to get them to work, but I also have some more general questions:
Could someone please explain to me what the advantage of adding the font files locally in the theme is compared to using the plugin with a kit?
If I decide to go with the plugin instead, what's the best way to remove Font Awesome from the child theme?
Is there a reason the theme uses Font Awesome 4.7.0 rather than the current version? How can I update it?

I would really appreciate your help!

[IanDelMar]

.fa-file-line does not exist in Font Awesome (FA) prior to v6. Here's a list of v4 icons which are available in Understrap by default: https://fontawesome.com/v4/icons/. Also, there is no .fa-solid prior to v6. It is .fas in v5 and does not exist in v4. When you use a plugin adding support for v5 or v6 icons will then be available.

The main differences between using FA 4.7 which comes with Understrap (or any other version you incorporate into your theme) and FA that comes with a plugin is that you can control every aspect. You can customize which icons to use and reduce the CSS needed for your website. By default FA 4.7 adds about 3000 lines to theme.css which can be reduced to a couple of lines if you use just a hand full of icons. You can decide whether to load necessary CSS file(s) in addition to your theme.css or add it to your theme.css (by default Understrap does the latter). You don't have to take care where asset files are hosted (you definitely host it yourself unless you are using a CDN) and if and to what extend this impacts the privacy of your website users. Using a plugin you become dependent on the FA version provided by the plugin.

The best way to remove FA from the child theme is to remove line 7 in child-theme.scss. But keep in mind that Understrap uses FA icons in understrap_post_nav() (here and here). So you either have to include your own version of understrap_post_nav() in your child theme or you have to provide childtheme_post_nav() and replace understrap_post_nav() in the template files. At the moment it is used in the single.php only. Alternatively, you may as well filter the output of previous_post_link() and next_post_link().

There have been discussions on updating FA (see #547 and #586) in the past. I don't know about the theme owner's plans concerning FA. Maybe @bacoords can shed some light upon this. Here's a guide on upgrading from v4 to v6: https://fontawesome.com/docs/web/setup/upgrade/upgrade-from-v4.

You may want to categorize this discussion under Q&A instead of using "General" as category.

[currentcreative]

Is Understrap still on Font Awesome 4.7 in 2023? Font Awesome 5 has been out since December 7, 2017.

I'm currently updating an old website from 2018 that used Bootstrap 4 and Font Awesome 5. I'd like to not go backwards on the Font Awesome as I'm converting it to Understrap. Is there a way to install Font Awesome 5 instead? I don't want to load both. I'd like to load 5 instead of 4.7.

[IanDelMar]

Yes, Understrap still uses v4.7. Of course you can use v5 instead. Are you planning to load all icons or a customized set of icons?

[currentcreative]

All the v5 icons. Or heck even v6 now that it's out. Understrap is going to eventually update to newer FA, right?