How To Create An Image Or Icon With The ACF Checkbox

Written by the Divi Engine Documentation Team

Introduction

Follow this example on how to create an image or icon with the ACF checkbox. 

Preview

Step 1: Add the ACF Checkbox

Add a new ACF field that can be a Checkbox. Add the values like the below image

Step 2: Assign a value/s to the post

Check the boxes that you want to appear on the post - see below for our example

Step 3: Add ACF Item Module

• Add an ACF Item module to the Theme Builder Template or Divi Library Layout
• Main Options > ACF Name: Choose the ACF field you made above in the setting
• Specific Settings > Checkbox: Style: Choose "Bullet List"

This will output the list below

What you will notice if you inspect the page, is that we add a class name for each value - see below

Step 4: Use CSS Magic

The final step is to add some CSS magic to add the icons or images before the titles.

Add Icons

Use the CSS below to create some icons. As you can see, we used Font Awesome and Divi libraries to create the icons.

After this CSS, it will look like this

Make it better with some more CSS - we added display:inline and some other CSS to make it look like buttons

Now it will look like this

Add an image

You can do the same with an image but it would need more CSS - below is some guidance - add this instead of the font family for the ::before element.

background-image:url("add_url_here");

More Support?

Please email us at [email protected] if you are unable to get Divi Machine working.