icon Gutenberg block

Getwid Blocks: Icon Gutenberg Block

Home > Blog > Getwid Gutenberg Blocks > Getwid Blocks: Icon Gutenberg Block

Icon Gutenberg block by Getwid is a very simple and handy block for adding and customizing Font Awesome icons in the Gutenberg WordPress Block Editor.

Use them to present any iconography-related content from services to social icons in a simplified yet meaningful format.

Note: you can use another set of icons instead of Font Awesome with this block. For example, here is one of the solutions.

icon block featured

Purpose of the Icon Gutenberg Block

Use different icon combinations and styles to:

  • Create plain but impressive interfaces
  • Employ system icons to visualize data
  • Create catchy lists of services/amenities/projects.

Icon Block Features

Let’s have a look at the main settings and features of this block.

  • The library of Font Awesome icons is pre-installed, so you just need to choose the needed ones for your website.

font awesome icons wordpress blocks

  • Decide on the icon shape (plain, with background and outline layouts available).
  • Choose a color scheme for icons.

gutenberg blocks icon layout and color

  • Customize the size of a default icon.
  • Change spacing to create a square or round-cornered icons.

icon block settings size

  • Link icons to external pages.
  • Apply icon animation effects on hover.

icon block animation effects

  • Apply margin settings to set the spacing between a row of icons and create a perfectly aligned set of icons.

icon margins wordpress gutenberg blocks

There are also a few inline settings for adjusting icons alignment.

alignment

Design Tips

  • Icon block can be transformed into the Icon Box block by Getwid if you need a pre-made layout with icons.
  • Use a similarly-shaped set of icons for presenting connected sets of services or skills.

Download a Free Gutenberg Theme for Getwid

In these examples, we used a default combination of colors in the Luviana theme. However, the block will work well with any other WordPress theme, including the official Twenty Nineteen theme for blogs.

We also always encourage Getwid users to give a try to Getwid Base – a free Gutenberg theme made with a combination of Getwid and Gutenberg blocks. It provides probably the most flawless content customization experience in the WordPress Block Editor paired with Getwid.

Useful links:

Check out Getwid WordPress Blocks Demo

Download Getwid Gutenberg Blocks Free

Install Getwid Base Starter Theme for Gutenberg

Getwid Video Tutorials

Was this article helpful?

Yes No

You have already left your review.

4 Replies to “Getwid Blocks: Icon Gutenberg Block”

  1. I love the icon box block!
    Is there any intelligent way to replace the iconset so you can use your own icons or maybe even add them to the list?

  2. Hi,

    I used an icon block with two down facing arrows, but these arrows don’t display. The only thing that is shown is a square. No matter which icon I choose.

    How can I solve this problem?

    Best regards
    David

    1. Hi David,
      It looks like there is installed a third-party plugin that overrides the version of the FontAwesome. Could you try disabling plugins one by one to find out what plugin causes a conflict?

Leave a Reply

Your email address will not be published. Required fields are marked *