Advanced Icon Block

The Advanced Icon block allows you to add icons to WordPress content. This block uses Google's Material Design icons. You can customize the style, size, color, link, margin, padding, background, border and more.


Video guide to the Advanced Icon block


How to create the Advanced Icon block

You can create an Advanced Icon block by clicking its button in the PublishPress Blocks category:

Advanced Icon
Advanced Icon

Settings for the Advanced Icon block

You can adjust key settings for the icons by using the right sidebar. The first option allows you to decide the number of icons in the row:

Number Of Icons
Number Of Icons

Choose Your Icon

The key setting for this block is choosing your icon.

  • Click the “Icon Selection” button.
Icon Library
Icon Library
  • You can now browse for icons, or use the “Search icons” feature.
  • Select an icon and click “Apply” to add icon to your post.
Icon Search
Icon Search

In addition to choosing an icon, you can select a “Style” from this dropdown:

  • Filled
  • Outlined
  • Rounded
  • Two-Tone
  • Sharp
Icon Dropdown
Icon Dropdown

After choosing your icon, you can also choose “Default” or “Stacked” in the sidebar. “Stacked” will add a border to the icon.

Default Stacked
Default Stacked

Key settings for the Advanced Icon blocks

After you choose an icon, you will see extra settings in the right sidebar:

  • Icon Size (in pixels)
  • Icon Color
  • Icon Background
Icon Size Color
Icon Size Color

These border options will only appear if you choose “Stacked”:

  • Border
  • Border Size
  • Border Radius
Border Icon
Border Icon

The “Link” area allows you to add links to your icon. Add the icon to the box labelled “Paste URL or type to search”.

Icon Link
Icon Link

In the “Padding” and “Margin” areas you can choose the padding and margin for your icons, using px, em or vh.

Padding Margin
Padding Margin
Icon Margin
Icon Margin

Default settings for all your Advanced Icon blocks

You can set default options for every Advanced Icon block added to your site. This is possible with the Default Blocks Config feature and it allows you to create a consistent look-and-feel for all your accordions.

  • Go to Adv. Gutenberg in your WordPress admin menu.
  • Click Configuration, then Default Blocks Config.
  • Click Advanced Icon.
Advanced Icon Blocks
Advanced Icon Blocks

Professional publishing plugins for WordPress! Get PublishPress

  • SUBSCRIBE TO OUR NEWSLETTER
  • SEARCH THIS SITE