Use Font Awesome

position: relative;
top: 50px; /* Adjust to center icon over the line */
background: #fff; /* covers the divider line */
width: 70px; /* extends the background wider than the icon */
z-index: 2; /* puts the icon on top of the line */

Divider in this example has added css to decrease the width, center it and change the color.

Note: Font Awesome must be referenced. Add the following code to your child theme style.css:

Use Text Titles

In a Text Module, edit two areas – Advanced Settings and Custom CSS.

Advanced Settings – In this example the font, text size and color were selected and set. I am using Bevan font, bolded and sized at 18px. Be creative :)> Depending upon what font and how large one selects, custom css will have to be added to control the display.

Custom CSS – In this example as follows:

position: relative;
top: 40px; /* Adjust to center text over the line */
background: #fff; /* covers the divider line */
width: 165px; /* extends the background wider than the text */
z-index: 2; /* puts the text on top of the line */

Divider Module – In this example, the divider has added css to decrease the width, center it and change the color.

Your generosity is greatly appreciated 🙂

Give a Shout Out

Subscribe for Divi Freebies

Plugin update notifications :: stay abreast of new and or updated items by opting in to my very occasional email newsletter. I swear by all that is right and holy your email address will never be shared, sold, traded or otherwise abused and I seriously doubt you'll see anything more than plugin/code update notifications when they are of the utmost importance.