craftcms
[5.x]: Icon field includes icons from "brands" pack, but they are incompatible with standard icons
What happened?
Description
The icon field includes icons from FontAwesome's "brands" pack mixed in among the icons from the base pack. This issue is that to use a "brands" icon in your template, you need to specify "fa-brands" in the class name - using one of the other variants like "fa-solid," "fa-regular," etc will not work like it does with all of the other icons.
Since we don't know if an icon is a "brands" icon when displaying the field value, the two types cannot be used together without specifying both "fa-brands" plus your other preferred style in the markup for the field.
e.g. <i class="fa-brands fa-regular fa-{{ entry.iconField }}"></i>
The documentation should likely be updated to reflect this.
Craft CMS version
5.7.9
PHP version
No response
Operating system and version
No response
Database type and version
No response
Image driver and version
No response
Installed plugins and versions
No response
Update here (and updated title to reflect) - including both fa-brands and fa-regular (etc.) classes does not actually work, so another solution is needed to distinguish brand icons from other icons in templates.
Hi, thanks for getting in touch! Are you including brands.css on your page? I just did a quick test with the following, and got both icons to show as expected:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="{{ currentSite.language }}">
<head>
<title>Icons page</title>
<link href="/assets/fontawesome/css/fontawesome.css" rel="stylesheet" />
<link href="/assets/fontawesome/css/brands.css" rel="stylesheet" />
<link href="/assets/fontawesome/css/solid.css" rel="stylesheet" />
</head>
<body>
<h1>{{ entry.title }}</h1>
<p>standard icon (number 5): <i class="fa-brands fa-solid fa-{{ entry.standardIcon }}"></i></p>
<p>brands icon (bluesky): <i class="fa-brands fa-solid fa-{{ entry.brandsIcon }}"></i></p>
</body>
</html>
I'm using a FontAwesome Pro hosted kit with all icons included and the SVG/JS method, and this doesn't work.
<p>
<i class="fa-brands fa-solid fa-linkedin"></i>
<i class="fa-brands fa-solid fa-users"></i>
</p>
Result:
Maybe it has other do with the auto-subsetting method that is the default on hosted kits?
Right, thanks for the extra info! I can see what you see when using the JS method. We’ll discuss internally!
We’ve resolved this for Craft 5.8 by adding a new styles array to icon values: (#17419)
{% set class = 'brands' in entry.myIconField.styles ? 'fa-brands' : 'fa-solid' %}
<i class="{{ class }} fa-{{ entry.myIconField.name }}"></i>
