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

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.