Custom Block Icons with ACF Blocks

In this tutorial, we will explore how to add custom icons to your ACF blocks.

Step 1: Create a New Block

First, you need to create a new block using ACF (Advanced Custom Fields). You can do this by navigating to the ACF field group and adding a new block.

Step 2: Add Icon Field

1. Go to ACF, and under your block settings, add a new field.
2. Choose the field type as 'Image' for the icon.

Step 3: Register Block Type

// Register custom block type
add_action('acf/init', 'my_acf_block_init');
function my_acf_block_init() {
    if( function_exists('acf_register_block_type') ) {  
        acf_register_block_type(array(
            'name'              => 'my-custom-block',  
            'title'             => __('My Custom Block'),  
            'render_template'   => 'template-parts/blocks/my-custom-block.php',  
            'category'          => 'formatting',  
            'icon'              => 'format-image',  
            'keywords'          => array('custom', 'block'),
        ));
    }
}

Step 4: Use Icon in Template

In your block template file (e.g., my-custom-block.php), you can access the icon field and render it:

$icon = get_field('icon');
if ($icon):
    echo '<img src="' . esc_url($icon['url']) . '" alt="Custom Icon" />';
endif;

Conclusion

By following these steps, you can successfully add custom icons to your ACF blocks, enhancing the visual appeal of your content.