Hello, there are a few different moving parts here. So depending on what you’re actually loading, the solution with vary. I’ll start with some context.
1:
“FontAwesome” is the version 4 font-family name. If you’re using that and seeing icons at all while using this plugin, then it’s either because you’re also loading version 4 (from some other theme or plugin–very common situation in the WordPress world), or you’ve enabled v4 compatibility with this plugin.
2:
When we released version 5, most of the v4 icons mapped over to the Solid style in v5. But there’s a set of them that map into the Regular style, which includes all of those you listed (e.g. address-card). You can see the full list here.
3:
You are using CSS Pseudo-elements to reference those icons (the :before thing in CSS). We recommend avoiding that technique wherever possible, in part because it tends to make situations like this unnecessarily complicated. Sometimes you can’t avoid it–understandably–like when you want to add icons to html elements in parts of your page template for which you don’t control the output.
If possible, though, switch to using <i> tags, like this:
<i class="fas fa-address-card"></i>
If you’ve loaded Font Awesome 5 Solid (or “all”, which includes Solid), this would give you the Solid style of that icon.
If you cannot avoid using CSS Pseudo-elements, then you’ll at least need to select the appropriate font-family for those icons. You can see our help page on CSS Pseudo-elements for details on which font family names to use in which situations, but for example, if you were using Font Awesome 5 Free and you wanted the solid icon, then it would look like this:
.li:before{
content: '\f502';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
This shows a little bit why it’s best to avoid using CSS Pseudo-elements when possible, because it requires hardcoding font-family name and font-weight, which various across the different versions and styles. Using the CSS classes handles all of that more gracefully.
