Matt Keys

You’ll be happy to hear a new contributor will be joining this project to bring it up to spec for FA7. I know I am! Getting him onboarded now so look to see changes soon.

That’s a question I’ve been asking myself too. My life has gotten busy with some projects outside of the development world so I am currently figuring out where these open source projects fit in.

I don’t have an answer yet. But I don’t think I will have FA7 support in the near future.

Compatibility mode tries to automatically fix the issues you were seeing the warning about. So you may run into far fewer, or perhaps even no remaining icons that couldn’t be fixed automatically.

But there could still be some icons that couldn’t automatically be resolved which would need to be fixed manually.

Generally speaking, it would go very near wherever you were already using the_field( 'my_fa_icon' );

Like maybe you had some markup like this:

<div class="container">
	<div class="my-icon-wrap">
		<?php the_field( 'my_fa_icon' ); ?>
	</div>
</div>

That would be converted to something like this:

<div class="container">
	<div class="my-icon-wrap">
		<?php
			$icon_object	= get_field( 'my_fa_icon' );
			$icon_family	= isset( $icon_object->family ) ? 'fa-' . $icon_object->family : '';
			$icon_id	= isset( $icon_object->id ) ? 'fa-' . $icon_object->id : '';
			$icon		= "<i class='" . $icon_family . " " . $icon_id . "' aria-hidden='true'></i>";
			
			echo $icon;
		?>
	</div>
</div>

Exactly where you decide to put the code comes down to developer preference/style, but something like in my example above would certainly work.

Shoot, you are right it still isn’t working with SVG icons. It was for me for a moment but I think I checked too quickly after switching from WebFonts to SVG and the kit just hadn’t updated yet.

Can you confirm you are using SVG icons too? I wonder if this is something we might need FontAwesome to look at.

Hey thanks for reaching out, I do remember this conversation with the FontAwesome team. I believe a fix is coming in a future release that will basically tell the JS to ignore the ‘fa-custom’ family class when rendering. But they stated it will only help ‘going forward’ and it sounds like that might only be for FontAwesome 7.

I did mention a possible workaround to them which it sounds like you’ve looked at a little. Currently if you have the icon set to return the “Icon Element” you would get something like this:

<i class="fa-kit fa-custom fa-drapes" aria-hidden="true"></i>

Changing the output to “Icon Object” would change what is returned to something like this:

stdClass Object
(
    [element] => <i class="fa-kit fa-custom fa-drapes" aria-hidden="true"></i>
    [class] => fa-kit fa-custom fa-drapes
    [id] => drapes
    [family] => kit
    [style] => custom
    [prefix] => fa-kit fa-custom
    [hex] => \57346
    [unicode] => 񗍆
    [svg] => stdClass Object
        (
            [SVG data here I am going to ignore for this example]
        )
)

Using the data in this object, you can build your own icon element to look however you need/want it to. You could do something like:

$icon_object	= get_field( 'my_fa_icon' );
$icon_family	= isset( $icon_object->family ) ? 'fa-' . $icon_object->family : '';
$icon_id	= isset( $icon_object->id ) ? 'fa-' . $icon_object->id : '';
$icon		= "<i class='" . $icon_family . " " . $icon_id . "' aria-hidden='true'></i>";

In this example, if you were to echo $icon you would get:

<i class="fa-kit fa-drapes" aria-hidden="true"></i>

• This reply was modified 1 year, 1 month ago by Matt Keys.
• This reply was modified 1 year, 1 month ago by Matt Keys.

Hello @becreativemedia,

Sorry for the late reply I was out on vacation and am just catching up. These two plugins used to work together, but I do see the problem you are experiencing.

Or at least I did briefly. Switching my kit settings from “SVG” icons to “Web Fonts” fixed the issue. But then going back to SVG the issue came back again.

However by going into the official FontAwesome plugin settings and clicking “Refresh kits data” while having the kit configured to use SVG icons, everything seems to work happily together again.

Let me know if that fixes it for you too.

Matt

• This reply was modified 1 year, 2 months ago by Matt Keys.