Inserting icons into a Gutenberg Table block is a promising way to add visual interest and organization to your content. It can also improve the readability of your tables. For example, adding a “check-mark icon “✔️” or cross-mark icon “❌” to a cell makes users quickly and easily identify the different types of data in a table, making it easier for users to scan and understand the information.
However, by default, the Gutenberg table block does not include any built-in functionality for inserting icons; you must use the WordPress plugin, or so you thought.
In this article, we will show you how to insert an icon to a cell in the Gutenberg Table block without the help of any third-party plugins.
How to Insert Icon to a Cell in Gutenberg Table Block (Without Plugin)
1. Apply the HTML Tag
In this step, we will apply some HTML tags to the cell on the Table block you want to insert the icon.
Add or Edit the Table Block
Go to the Gutenberg WordPress editor to create new content (page/post) or select your existing content with the Table block inside. Tweak and style up your Table block with your preference.
Next, specify the cell/s you want to insert the icons. In this example, we will insert icons to some cells.
Edit the Block as HTML
Navigate to the block toolbar by clicking the Options button (⋮) -> Edit as HTML.
Afterward, please follow the steps below:
- Assign the cell/s you want to add the icons.
- Add the
<i>tag before the</td>tag, then close it with the</i>. - Add
class="your-custom-icon"within the<i></i>tag.
In this example, we will add the check-mark icons to some cells, so the HTML code that we insert is <i class="fas fa-check"></i>. In this case, the fas fa-check value on the class attribute belongs to the check-mark icon of Font Awesome.
You can get the HTML code of the custom icons on the online icon toolkit, such as Font Awesome and other Font Awesome Alternatives like Flaticon, Bootstrap Icons, to Google Fonts. In this example, we got the HTML code from the Font Awesome. You can tailor the class name according to the class name of the icon you want to use. To check the icon class name, you can click the icon you like and go to the HTML section on the appearing window, as shown below.
If you use other icon providers than Font Awesome, you can tailor the icon class name on the class attribute.
Once you’ve finished adding HTML tags to your Table block, please return to the visual editor and preview your page by clicking the Preview button.
2. Add the Custom CSS (Optional)
Suppose you want to modify or style up the icon, such as the color, size, position, etc. You can add custom CSS in Gutenberg using the “Additional CSS” section on theme customizer.
On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS. Copy the CSS snippet below and paste it into the input field. If you use a block theme, you may need to enable the theme customizer first. We have a separate post covering how to enable a theme customizer on a block theme you may want to read.
Here is the CSS snippet you can use.
td i {
color: #008000; /* Change color to your preference */
font-size: 22px; /* Adjust font size to your preference */
}
Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.
The Bottom Line
Adding icons to cells in a Gutenberg Table block is a straightforward process that can be accomplished without plugins. By utilizing the built-in HTML capabilities of the block, you can effortlessly insert various icons using Font Awesome or any online icon toolkits.
However, if you’re using Windows or macOS, you can insert the icons into the cells using a keyboard shortcut for icons/emojis. But of course, this method has its weaknesses: limited icon variety and customization.
- Windows: Win + Period
- macOS: Control +Command + Spacebar
