The icon block allows you to add a fresh air to your design. Icons can reinforce your message and make your site more memorable. You can drag the icon block to the section you want on your page, or add the block from any “+” sign on your canvas.
When you select the icon block, you will see a toolbar showing up on top of it, with several basic editing options. In a previous chapter we explained the common editing options for all blocks.
In the case of the icon block, here are the ones that apply: positioning, duplicate, insert before, insert after, copy style, paste style, paste style and link, and remove block. The copy and paste styling options are available with the PRO plans.
Icon block: customizations within the block editing panel
The moment you select any block, a block editing panel will open up on the right-hand side. It always has three options: content, style, and advanced. The possibilities inside vary from block to block. Let’s look at what distinguishes the icon block from the rest of the blocks.
Content
At the “Content” level you can:
- Select an icon from the ones made available by Kubio.
- Align your icon horizontally.
- Add a link to the icon.
Style
Inside “Style” you can customize:
- Icon color and icon hover color.
- Icon size.
- Icon rotation.
- Icon border for the normal and hover states.
Advanced
At this level you can make edits to this block, in two states: normal and hover, for both the icon and its container. Now, you can imagine the container as the space that your icon occupies.
No matter what you choose to edit, you have the same options both in the normal and the hover state, the icon and the container. The only difference is that for the hover state, you can set up transition and its duration.
Now, here are the common available options:
- Background. Here you can make adjustments to background color and type.
- Spacing. Here you can set up the margins and paddings for your Gutenberg icon block.
- Border and shadows. Here you can add borders with a different color, radius and thickness to your block. Also, you can add box shadows. You have full control over the position, blur, spread and color of the box shadow.
- Responsive. Here you can decide whether the block will show or not on desktop, tablet or mobile.
- Miscellaneous. At this level you can set up the z-index of your block (vertically order the elements that overlap), set up if the element overflows or not (displaying the content of the block flowing out of its container into the surrounding area), add HTML anchors and CSS classes.