We’ve created a nice library of custom MetaBox fields to incorporate on our client sites but have been trying to figure out a way to incorporate custom icons or just font awesome icons for each post. This way, we could query the icon on post loops, etc. on different pages and components.
Provided the recipe, here is how to add it to any post…
First, create your ACF Icon field using ACF Font Awesome Field plugin - for our example here, we created one with the meta_field name “icon”.
Then add the following to your functions.php - (be sure to change the field key from “icon” to what your custom field key is):
/**
* Fetch the icon related to a post.
*
* @return void
*/
function fetch_post_icon() {
$post_id = \Bricks\Query::get_loop_object_id();
$iconFetch = "post_" . $post_id;
$post_icon = get_field('icon', $iconFetch);
if($post_icon) {
echo $post_icon;
}
}
// Use fetch_post_icon() wherever you need to display the icon.
Lastly, just use the {echo} dynamic data as such in your Bricks element or text element: {echo:fetch_post_icon()}
When I use a loop within a loop (on an archive page), in the loop for the repeaters I can return a text file from the repeater row, but I can not get the icon to return.
I tried creating a test function that returns a string and that string is returned using the value {echo:say_hello()}
I have tried changing the name of the repeater and tried changing the name of the icon field that selects the icon.
I am asking ACF to return the element for the field.
I have changed the name to the name of the icon field in the line:
Pardon the delay - I see what you mean. Let me test on my end. The one used in my example is to pull it from individual posts {post_icon} but for a repeater - example: {repeater_item_icon}. I’ll test tonight and see if it’s easily possible. Should be same as referencing a standard ACF image field within a repeater.
Thanks for the update - yes, no luck on my end either. I noticed @Sridhar’s latest Brickslabs tutorial and was about to ping him on this one, however if this is something he’s looking into creating a new tutorial for then I’ll wait.
How is the icon being rendered on the page if you inspect? Can you send a screen capture of the elements in the DOM markup? Guessing the icon is being rendered as an <i class=fa-icon etc etc"> tag in the wrong order?
This is ours (notice order of Bricks dynamic tags vs. rendered DOM):
I spent hours before Brickslab’s tutorial just trying to apply the ACF FA field meta values to a simple div or image element and was puzzled by how the raw values are saved in the post but Bricks just doesn’t show them in the builder dynamic tags. Would be super easy to just apply the Font Awesome class values as a dynamic class in Bricks (so I thought, lol). Super thanks again for the original assistance in prior threads @digismith (pardon for not adding credit in the OP here mate!)
Regarding Bricks built in ACF dynamic functionality - My understanding and from looking at Bricks theme files, Bricks comes pre-mapped for default ACF field types, like fetching text, wsywig, images, etc. Having the ability for instance, to add ACF FA requires Brick’s to render an Icon element before the field where the custom function " [quote=“FranklyCo, post:1, topic:14797”]
{echo:fetch_post_icon()}
[/quote]" gets added. Which just hasn’t been added to generate it in Bricks default. You’d think it should be able to fetch any raw meta values from a post/repeater and then simply be added as a pre-set element type with the FA classes via a hook if it’s ACF FA. I could be totally wrong though regarding Brick’s default mapped functions for ACF’s core field types (haven’t done a complete deep dive through all the theme files for better understanding yet).
ACF Repeater Query Loop - ACF Font Awesome Icons plugin author has provided a quick workaround to be able to retrieve ACF FA field type data contained within a repeater. Link to thread there.
Add this to child theme functions.php (be sure to replace the field name ‘icon_testing’ with the field name you are using in your repeater):
function fetch_fontawesome_icon_from_loop() {
$acf_row = \Bricks\Query::get_loop_object();
if ( isset( $acf_row['icon_testing'] ) ) {
return $acf_row['icon_testing'];
}
}
Then use this as your Bricks Dynamic Data tag (or change function name accordingly to your needs):
