Go to athemes.com

Using the Icon Block

Want to highlight features or services with icons on your WordPress site? The Icon block in aThemes Blocks lets you pick from hundreds of icons in the built-in Icon Library and customize their color, size, rotation, background, and border from inside the Gutenberg editor.

In this guide, we’ll walk you through how to enable and configure the Icon block with aThemes Blocks.

Before you get started, make sure you’ve installed and activated the aThemes Blocks plugin on your WordPress site.

Enabling the Icon Block

First, enable the Icon block from the Blocks Dashboard. Once enabled, open any page or post and add the Icon block from the block inserter.

Enabling the Icon block from the aThemes Blocks dashboard
Icon block added to a page in the WordPress editor

Configuring General Settings

With the Icon block selected, open the General tab in the settings sidebar:

  • Content – Select an icon from the Icon Library, which includes Font Awesome and Boxed Icons. You can also add a link to make the icon clickable.
Icon block general settings
Selecting an icon from the aThemes Blocks Icon Library

Styling the Icon Block

Switch to the Style tab to customize the icon’s appearance:

  • Alignment – Align the icon to flex start, center, or flex end.
  • Icon Settings – Adjust the color, size, and rotation of the icon.
  • Icon Background – Choose a background color and define the height and width of the background area.
  • Icon Border – Set the border style (solid, dashed, dotted, etc.).
Icon block style settings

Configuring Advanced Settings

The Advanced tab unlocks layout, animation, and responsive controls:

  • Layout – Adjust padding, margin, and Z-index.
  • Background – Set a background color for the entire block.
  • Border – Define the border style of the entire block (solid, dashed, dotted, etc.).
  • Animation – Apply entrance animations like slide in, fade in, zoom in, rotate in, or flip in.
  • Responsive – Hide the block on desktop, tablet, or mobile.
  • Advanced – Add custom CSS classes or CSS IDs for further styling.
Icon block advanced settings

That’s it! You’ve successfully configured the aThemes Blocks Icon block with the settings that match your design.

Next, would you like to pair your icons with clickable call-to-action buttons? Check out our guide on Using the Button Block to learn more.

image_print