Getwid Blocks: Icon Gutenberg Block
Table of Contents
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.
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.
- Decide on the icon shape (plain, with background and outline layouts available).
- Choose a color scheme for icons.
- Customize the size of a default icon.
- Change spacing to create a square or round-cornered icons.
- Link icons to external pages.
- Apply icon animation effects on hover.
- Apply margin settings to set the spacing between a row of icons and create a perfectly aligned set of icons.
There are also a few inline settings for adjusting icons 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
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?
Hi,
You can use this example to learn how to add font of custom icons to the Getwid.
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
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?