How to Add Icons Inline with Text Using Divi WordPress

by | May 16, 2023 | Website Design

This page may contain affiliate links to recommended products or services. If you choose to purchase after clicking a link, I may receive a commission at no additional cost to you.

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

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>
Floyd Hartford is a website developer from southern Maine. He's focused on creating and building WordPress websites and loves spending time digging into code like HTML, CSS, scss, jQuery, PHP, and MySQL.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

5 × 4 =

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Looking for WordPress Help?

I’m a freelance web developer specializing in small business and corporate marketing websites.

Pin It on Pinterest