Divi is a wicked cool WordPress theme. It comes with all sorts of widgets and makes it easy to add dynamic text, images, carousels, call-to-action sections, and icons. For example, if you want to add an icon to your page template, there’s a Divi module for that. But, what if you want to add or insert an icon inline with text using Divi’s text module? Well, Divi has a way to do exactly that. In this article, I will share how to add icons inline with text using Divi for your WordPress website.

Table of Contents

• Where to find Divi icon Unicode values
• How to add Divi icons inline with text and the Text Module
• How to customize the size and style of inline Divi icons.

Where to find Divi icon Unicode values

Adding a Divi icon inline is easy, but before you inline a Divi icon, you need a Divi icon to add. Specifically, you’ll need an icon and its Unicode value to add it inline as text. Lucky for you, Divi has an entire directory of all its icons available for you to browse. Browse all of Divi’s icons and corresponding Unicode values.

How to add Divi icons inline with text and the Text Module

Adding a Divi icon inline with text and the Text Module is straight forward. You can apply this method anywhere you’re able to enter HTML on your Divi built WordPress site, so it’s extremely extendable too.

• Add an HTML span element with a CSS class called “et-pb-icon”
• Add the Unicode value of the icon you want to use as the content
• Close the span

Here’s what the code looks like. You’ll do this in the “text” view of the Text Module’s content editor.

<span class="et-pb-icon">&#xe007;</span>

Here’s a screenshot of how to add an inline icon next to text using Divi’s page builder.

How to customize the size and style of inline Divi icons

You might have noticed the icon in the screenshot above is a lot bigger than the text it’s inlined with. It’s probably not the visually appealing design you’re looking for. However, Divi icons behave like normal text, so using CSS you can customize the size and style of inline icons to meet your needs.

Changing the inline icon’s size

To change the size of the inline icon simply add and adjust a font-size style using CSS.

<span class="et-pb-icon" style="font-size:12px;">&#xe007;</span>

Changing the inline icon’s color

To change the size of the inline icon simply add and adjust a color style using CSS.

<span class="et-pb-icon" style="color:#F00;">&#xe007;</span>

Adding spacing around the icon

To add space around the icon, to the left or right, add and adjust a margin style using CSS. This will offset the icon from your text to give it a little breathing room on the page.

<span class="et-pb-icon" style="margin-right:16px;">&#xe007;</span>