ACF Font Awesome Field in Bricks

This Pro tutorial walks you through using the Advanced Custom Fields: Font Awesome Field plugin in Bricks for showing Font Awesome icons.

Consider this ACF field group with a Repeater field having the Font Awesome ACF sub field for a Page:

Result after implementing the tutorial:

Step 1

Install the Advanced Custom Fields: Font Awesome Field plugin and activate it.

Create the ACF field group for your desired location (all Pages in this example).

JSON export of the field group

For the 'Font Awesome Icon' type field, leave the Return Value as 'Icon Element'.

Set 'Enqueue FontAwesome' to Yes. The plugin loads FA only on the pages where the icons are used.

Step 2

Edit your Page or Template with Bricks.

Copy the JSON from the link below and paste it in the Bricks editor.

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 525 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
ACF Repeater sub field value dynamic data condition in Bricks

ACF Repeater sub field value dynamic data condition in Bricks

This Pro tutorial provides the steps to output an element on single posts (can be of any post type) only if a specified ACF (Pro)…
Pro
Bricks Slider Images From ACF Flexible Content Sub Field

Bricks Slider Images From ACF Flexible Content Sub Field

Consider the following field group associated with Pages when using ACF Pro: "Page Fields" field group|_"Page Content" Flexible Content field|__"Layout 1" layout|___"Title" Text field|___"Layout 1…
Pro
ACF Taxonomy Field Value in Single Posts

ACF Taxonomy Field Value in Single Posts

Consider this scenario: CPT: Movie Movie CPT Taxonomy: Movie Genre Movie Genre Taxonomy's field: Genre Color Each movie will have only genre set. The requirement…
Categories:
Tags:
How to create a dynamic infinite logo slider with ACF and Bricks

How to create a dynamic infinite logo slider with ACF and Bricks

This tutorial provides the builder settings, PHP & CSS codes that can be pasted in order to create an infinite logo slider in pure CSS…
Pro
Conditional Rendering of ACF Repeater Rows Based on True / False Sub Field in Bricks

Conditional Rendering of ACF Repeater Rows Based on True / False Sub Field in Bricks

This Pro tutorial provides the steps to modify a ACF Repeater query loop to only output the rows for which a True / False type…
Categories:
Pro
ACF Relationship: Show all other events related to the artists of the current event

ACF Relationship: Show all other events related to the artists of the current event

How all other events related to the artists of the current event can be output in a Bricks query loop.
Categories:
Pro
ACF Repeater Row Count Condition in Bricks

ACF Repeater Row Count Condition in Bricks

This Pro tutorial provides the steps to output elements on single posts (of any post type) in Bricks only if a specific ACF Repeater-type of…
Categories: