Skip to content

Instantly share code, notes, and snippets.

@mohammad425
Created February 28, 2023 07:03
Show Gist options
  • Save mohammad425/d810fc071d51a395724eb7b0b0b67c59 to your computer and use it in GitHub Desktop.
Save mohammad425/d810fc071d51a395724eb7b0b0b67c59 to your computer and use it in GitHub Desktop.
Display Font Awesome Icon Field in Elementor With "Advanced Custom Fields: Font Awesome Field" Plugin
<?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',
];
}
}
<?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' );
@nsomaru
Copy link

nsomaru commented Jul 8, 2023

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.

@mohammad425
Copy link
Author

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.

@jayhwu3
Copy link

jayhwu3 commented Apr 30, 2024

Thank you so much for this!

@mikriz
Copy link

mikriz commented Sep 25, 2024

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

@mohammad425
Copy link
Author

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

@mikriz
Copy link

mikriz commented Sep 26, 2024 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment