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' );

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