Display Font Awesome Icon Field in Elementor With "Advanced Custom Fields: Font Awesome Field" Plugin

acf-font-awesome.php

<?php

# Prevent direct file access
defined( 'ABSPATH' ) || exit;

use ElementorPro\Modules\DynamicTags\Tags\Base\Tag;
use ElementorPro\Modules\DynamicTags\ACF\Module;

class ACF_Font_Awesome extends Tag
{

    public function get_name()
    {
        return 'acf-font-awesome';
    }

    public function get_title()
    {
        return esc_html__( 'ACF', 'elementor-pro' ) . ' ' . esc_html__( 'Font Awesome', 'elementor-pro' ) . ' ' . esc_html__( 'Field', 'elementor-pro' );
    }

    public function get_group()
    {
        return Module::ACF_GROUP;
    }

    public function get_categories()
    {
        return [
            Module::TEXT_CATEGORY,
            Module::POST_META_CATEGORY,
        ];
    }

    public function render()
    {
        [$field, $meta_key] = Module::get_tag_value_field( $this );

        if( $field && !empty( $field['type'] ) )
            $value = $field['value'];
        else
            // Field settings has been deleted or not available.
            $value = get_field( $meta_key );

        echo wp_kses_post( $value );
    }

    public function get_panel_template_setting_key()
    {
        return 'key';
    }

    protected function register_controls()
    {
        Module::add_key_control( $this );
    }

    public function get_supported_fields()
    {
        return [
            'font-awesome',
        ];
    }
}

functions.php

<?php

/**
 * Register new Elementor dynamic tags.
 *
 * @param \Elementor\Core\DynamicTags\Manager $dynamic_tags_manager Elementor dynamic tags manager.
 *
 * @return void
 */
function register_font_awesome_dynamic_tags($dynamic_tags_manager)
{
    include_once ABSPATH . 'wp-content/plugins/elementor-pro/modules/dynamic-tags/tags/base/tag.php';
    include_once ABSPATH . 'wp-content/plugins/elementor-pro/modules/dynamic-tags/acf/module.php';
    include_once __DIR__ . '/acf-font-awesome.php';

    $dynamic_tags_manager->register( new \ACF_Font_Awesome );
}

add_action( 'elementor/dynamic_tags/register', 'register_font_awesome_dynamic_tags' );

Hi,

Thanks for this.

What element are you using to display the icon? What return type value are you using in the ACF field definition?

I've tried the "heading" element, and am dynamically setting the "title" but when I inspect, nothing is being returned.

HTML code is returned, for example:
<i class="fa-solid fa-gears" aria-hidden="true"></i>

Make sure that the FontAwesome is loaded on the page.

Thank you so much for this!

im sure this is a stupid question but where do i add the acf-font-awesome.php code? i to add the other functions code to my functions.php but not where the ther code goes? thanks for this code this is exactly what i needed. i just need to figure out how to add it

im sure this is a stupid question but where do i add the acf-font-awesome.php code? i to add the other functions code to my functions.php but not where the ther code goes? thanks for this code this is exactly what i needed. i just need to figure out how to add it

You can create the acf-font-awesome.php file in your child theme.
If you take a look at line 14 of the functions.php file, you'll see something like include_once __DIR__ . '/acf-font-awesome.php';. The __DIR__ refers to the directory path where functions.php is located, so the acf-font-awesome.php file should be placed in the same directory as functions.php.

Here's how the structure should look:

/wp-content/
    -> /themes/
         -> /your-child-theme/
             -> acf-font-awesome.php
             -> functions.php

Thanks you so muchOn Sep 26, 2024, at 2:07 AM, Mir Mohammad Hosseini ***@***.***> wrote:Re: ***@***.*** commented on this gist.im sure this is a stupid question but where do i add the acf-font-awesome.php code? i to add the other functions code to my functions.php but not where the ther code goes? thanks for this code this is exactly what i needed. i just need to figure out how to add itYou can create the acf-font-awesome.php file in your child theme.If you take a look at line 14 of the functions.php file, you'll see something like include_once __DIR__ . '/acf-font-awesome.php';. The __DIR__ refers to the directory path where functions.php is located, so the acf-font-awesome.php file should be placed in the same directory as functions.php.Here's how the structure should look:/wp-content/ -> /themes/ -> /your-child-theme/ -> acf-font-awesome.php -> functions.php —Reply to this email directly, view it on GitHub or unsubscribe.You are receiving this email because you commented on the thread.Triage notifications on the go with GitHub Mobile for iOS or Android.                                                           

updates 2025 im new to git so there is a link xD

https://github.com/Gstudio-mike/Custom-ACF-Font-Awesome-Icon-Dynamic-Tag-in-Elementor

What's Changed:
Refactored render() method to output the icon as an actual HTML tag instead of plain text.

Added validation with preg_match() to ensure only valid Font Awesome class strings are rendered.

Used esc_attr() for security to prevent injection of untrusted HTML attributes.

Improvements:

• Visual rendering of icons inside Elementor widgets (e.g. ).

• PHP 8.1 and 8.2 compatibility: Avoids dynamic property access and silent null errors.

*- Cleaner output: No raw class names in the frontend, fully compatible with Elementor structure.

• Secure rendering: Outputs only validated class names to prevent XSS issues.

Cheers