Complete Guide to Adding Icons in WordPress!
Images inserted throughout a WordPress post play an important role in keeping readers engaged and bringing life to your content. However, large image file sizes can be a problem. Today, let’s learn how to energize your posts using the Icon Block in the Kadence Theme for WordPress, which allows you to add lightweight and stylish icons easily!
The Icon Block in the WordPress Kadence Theme
At WPlaybook, for those just starting with WordPress, we recommend the WPlaybook ALL100 theme. In fact, the ALL100 theme is a child theme slightly modified from the WordPress Kadence theme to provide the most basic and fastest performance as I envision it.
Therefore, you can use all the standard blocks provided by the WordPress Kadence theme that we teach at WPlaybook.
Among the blocks offered by the Kadence theme, there is an ‘Icon’ block. This block allows you to display simple images as small icons, as shown below.
As you can see above, the WordPress Icon Block in the Kadence theme offers hundreds of free icons. It’s like having hundreds of little stickers that you can freely add into your posts. 🙂
If you place these stickers thoughtfully throughout your content, it can make your writing feel much more relaxed and charming. Now, let’s learn how to insert icons in WordPress.
How to Insert Icons in WordPress
In WordPress, inserting an icon block is simple. While in the block editor’s editing mode, type a slash (/) and a block insertion popup like the one below will appear.
Here, click the star icon inside the circle shown above to insert the Icon block.
Exploring the WordPress Icon Settings Panel
Once you insert the Icon block, a settings panel for that block will appear on the right side of the screen (see the image below). There are many features available, but let’s take a look at five key functions that are most commonly used.
From here, select the desired icon.
You can enter a number directly, or resize the icon by dragging it left or right.
You can enter a number directly, or resize the icon by dragging it left or right.
- DEFAUT : Borderless, which is set automatically.
- STACKED: When selected, you can set additional border and background colors.
From here, select the desired icon.
- Left: Icon color
- Right: Color on mouse hover
Sets the link to be accessed when the icon is clicked.
Kadence Blocks Compatible with the Icon Block
The ‘Icon Block’ provided by the Kadence theme can be used independently, but it can also be incorporated within other Kadence theme blocks. The four main blocks that commonly use icons are as follows:
- Text blocks
- Button Blocks
- Info block
- Icon list
Text block
When you add a text block, an icon setting section appears at the bottom of the activated menu, where you can insert an icon. Using this feature well allows you to create unique and eye-catching headings.
Button block
You can also add icons inside WordPress buttons. Adding an icon that represents the linked page well makes it much easier for site users to navigate comfortably.
After inserting a button, click the icon setting section in the displayed menu to open the icon insertion options.
Info Box
Icon List Block
The Kadence Theme’s Item List block extends the basic WordPress list block by allowing you to use a wider variety of icons. For example, you can add icons like check marks in front of list items.
As shown in the image below, after inserting the icon list, you can click the “Select Icon” dropdown menu in the toolbar to choose the icon you want to add.
Expanding WordPress Icons! Create Your Own Custom Icons
If you mix relevant icons into each paragraph or chapter based on the content, it can ease readers’ understanding and make your posts look richer. Since there are hundreds of built-in icons available, that alone is enough to enhance your posts.
However, if you don’t find an icon you like among the default ones, there is a way to create and upload your own custom icons. This can be done using the Custom Icon feature provided in the Kadence Theme Pro! If you want to learn more about the custom icon feature, please click the button below!
We hope your posts become even more engaging with the use of icons.
WPlaybook shares many handy WordPress tips, business website creation guides, and knowledge about online monetization. By joining the WPlaybook community, you can regularly receive useful WordPress-related insights. We appreciate your interest and participation!
