ACF Checkbox Items with Custom SVG Bullets in Bricks

This tutorial walks you through outputting the choice values of a ACF Checkbox field with a SVG icon to the left of the list items.

Field group:

Field being populated when a Page is being edited:

Frontend after implementing the tutorial:

Step 1

Create a field group having a Checkbox-type of custom field using ACF.

Edit your posts (or Pages or CPT items) and select choices for each.

Step 2

Edit your singular template for your post type or a specific Page with Bricks.

Add a Code element and paste:

<?php

$choices = get_field( 'room_amenities' );

if ( $choices ): ?>

  <ul>
      <?php foreach( $choices as $choice ): ?>
          <li><?php echo $choice; ?></li>
      <?php endforeach; ?>
  </ul>

<?php endif; ?>

Replace room_amenities with your field name.

Click the Sign code button.

Step 3

Click STYLE → CSS and paste:

%root% ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

%root% li {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%235f6368'%3E%3Cpath d='M0 0h24v24H0V0zm0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 2px;
	padding-left: 30px;
	margin-bottom: 20px;
}

%root% li:last-child {
	margin-bottom: 0;
}

If you would like to show a different icon, open the icon SVG file in a text editor, copy its HTML and paste it under Insert SVG here.

Then copy the generated CSS property code from Ready for CSS and replace the one in the above with it.

Reference

https://www.advancedcustomfields.com/resources/checkbox/#display-values-in-a-list