How to change the Divi slider arrows to any icon or text

November 12, 2020

The Divi slider is a slider that works out of the box, but always looks the same on every website, if no special CSS has been added. With the help of just a few lines of code, it can be transformed to something a lot more beautiful.

In our latest child theme eCommerced, we have changed the arrows to a new icon. Changing the icon is not possible in the module settings, so this has been done with the CSS.

This is one example of another arrow in the Divi slider module.

Creating the slider

The first thing you have to do is add the slider module. Create a section, in there create a row and then add the slider. Then go to Advanced -> CSS Class -> add the class ‘dr-slider’.

Changing the Divi slider icons

The default slider icons of look like a V and are actually an icon of the Elegant Icon Font. Therefore, it is really easy to edit the icon. Find an icon you like, I always use the website Divi Dezigns to easily find the icon needed.

Use to following code to change the Divi Icons in the slider. In the CSS you see font-size: 30px;. With that code you can make the icon bigger or smaller. Change this to what suits your needs. The code content: “\23”; is how you change the icon. Change the Icon what you want.

.dr-slider .et-pb-slider-arrows .et-pb-arrow-prev:before {
	font-size: 30px;
  	content: "\23";
}

.dr-slider .et-pb-slider-arrows .et-pb-arrow-next:before {
	font-size: 30px;
  	content: "\24";
}

And that’s all to change the Icon to another icon with only CSS. If you want to icon to text, you will have to add some other CSS code.

Changing the icons to text

Sometimes it looks better to change the icon to something completely else, plain text. The following provided CSS snippet will change the icons to text. Of course, change this to how you want it.

.dr-slider .et-pb-arrow-prev:before,
.dr-slider .et-pb-arrow-next:before {
    /* Change this to the font you are using on your website */
	font-family: 'Montserrat', sans-serif !important;
    /* Set the font size */
	font-size: 16px;
    /* Optional letter spacing */
	letter-spacing: 1px;
    /* Rotate the text */
	transform: rotate(-90deg) !important;
    /* Correct position */
    display: inline-block;
}

.dr-slider .et-pb-arrow-prev:before {
    /* Change this to change the text*/
	content:'PREV'!important;
}

.dr-slider .et-pb-arrow-next:before {
    /* Change this to change the text*/
	content:'NEXT' !important;
}

The results of changing the slider icons to text

Related Posts

By Melle

i

Learn More

Related Posts

Free download: 25 Custom Divi buttons without CSS

Free download: 25 Custom Divi buttons without CSS

Divi is an amazing website builder and page builder for WordPress. It offers a ton of custom functionalities and elements that can be used to create beautiful websites. One of the most popular Divi features is the Divi Builder which allows you to create custom buttons...

4 Comments

  1. EUGENIUSZ KUTNY

    Thanks !!!
    Where to put css?

    Reply
    • Melle

      The code can be added here:

      Divi > Theme options > scroll all the way down to “Custom CSS”.

      Reply
  2. Cristina Turolla

    Nice and simple tutorial! Thanks

    Reply
    • Melle

      Hey, I’m glad this little trick could help you!

      Reply

Submit a Comment

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

h

Subscribe to Our Newsletter

Stay in the Loop!

Save 10% on your next purchase!

Save 10% on your next purchase!

Grab your discount and get special offers sent to your inbox!

Yes, you will receive your coupon in a few seconds.