Trouble getting some icons to display

Are you using this plugin to load Font Awesome?

If you’re having to add the “fa” class in order to get it to work, that tells me that you’re not loading Font Awesome 6 correctly, which means either that you are not using this plugin to load Font Awesome 6, or else you have more than one version of Font Awesome being loaded on your site–and conflicting–which can happen when your theme or other plugins are trying to load their own. You can use the Conflict Detection Scanner on the Troubleshoot tab in the settings page for this plugin to find and block those conflicting versions (most of the time).

If you want to use the “fa-solid” class in your <i> tags, you’ll have to be using Font Awesome Version 6, since that syntax is new to v6. But if you’re loading Version 5, you should use Version 5 “fas” class instead of the Version 6 “fa-solid”–it is the equivalent way to select the Solid style.

Once you get it loading correctly with v5 or v6 using this plugin, you should remove the “fa” class, since it does the same job as either “fas” or “fa-solid”, but is the Version 4 syntax.

Here’s what the Conflict Detection Scanner found:

——————————————-

Other themes or plugins
Below is the list of other versions of Font Awesome from active plugins or themes that are loading on your site. Check off any that you would like to block from loading. Normally this just blocks the conflicting version of Font Awesome and doesn't affect the other functions of the plugin, but you should verify your site works as expected. If you think you've fixed a found conflict, you can clear it from the table.

link	https://use.fontawesome.com/releases/v5.15.3/css/all.css?ver=5.15.3	

link	https://shop.fyccn.org/wp-content/plugins/toolset-blocks/vendor/toolset/toolset-common/res/lib/font-awesome/css/all.css?ver=5.13.0

——————————————-

I checked both and saved to block both of these and then reloaded the page, but the icon is still not displaying.

Please advise on how to remedy this. Let me know if I should raise the issue with the Toolset plugin support group as well and please let me know what I should request they do to stop the problem.

I tried changing fa-solid to fas in my previous code and that didn’t fix it either.

Ok, looking at your site, I can see that you are still loading Font Awesome 5.15.4 with the Font Awesome plugin. If you switch that in the admin settings to use 6.0.0, that location-pin icon should work as expected.

The reason is that the similar icon in Font Awesome 5 was called “map-marker”. Font Awesome 5 doesn’t know about the name “location-pin”. So you’re loading FA5 but using FA6 classes to specify style and icon name.

I tried this in the web console on your site, and it worked. If you want to keep using FA5 Free, just change that class from “fa-location-pin” to “fa-map-marker”. If you want to use FA6 Free, then change the settings on the Font Awesome plugin admin page to load 6.0.0.

Side note: I notice also that you still have multiple versions of Font Awesome awesome being loaded. This currently doesn’t not appear to be causing a conflict with how it functions, but it might at some point–and it’s inefficient to load both.

This is the other one that is still being loaded by something else on your WordPress site:

<link rel="stylesheet" id="fontawesome-css" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css?ver=5.15.3" type="text/css" media="">

This is the one being loaded by the Font Awesome plugin:

<link rel="stylesheet" id="font-awesome-official-css" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" type="text/css" media="all" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">

That worked! Thanks a bunch. I think the first one you mentioned is from the Toolset plugin. I’ve put in a feature request with them to get them to update to version 6.

Great!