Add a default icon to Elementor buttons

It’s 3AM, and I just faced an interesting project challenge. I am developing a new website where most buttons have the same icon—but not all of them. So, I wanted to set a default button icon that can be easily overridden.

The default icon I want looks like this. It’s a double-arrow, right.

Setting it up

I got started by adding an icon to a button manually. Elementor icons use the “Font Awesome 5 Free” font. If you haven’t upgraded Elementor yet, you’ll need to do this to get the new icons. The goal is to find the unicode symbol for the icon. Right click on the icon and go into the Inspector. You’ll find the following structure:

There is a span, then an <i> (icon), then a ::before (pseudo-class) for the <i> tag. Click on the ::before and look for the “content” space. Here, you can see that the unicode is “\f101”. Once you’ve selected your icon, that unicode content will be what you want to grab. This is the code that creates your icon.

Once we’ve got the unicode for our default icon, it’s time to apply some CSS. You can add this CSS to your style.css of your child theme, or to the Customizer Additional CSS.

span.elementor-button-text::after {
    content: "\f101";
    font-family: "Font Awesome 5 Free";
    margin-left: 7px;
}

What does this CSS do? A few things:

  • It creates an ::after pseudo-class after the button text. This means we are creating (well, defining, anyway) an element after the text of the button outputs.
  • It sets the content of that ::after to “\f101” (replace this with your unicode)
  • It sets the font to the Elementor Font Awesome font so that the unicode is interpreted correctly
  • It adds a bit of margin to the left so that it’s not jammed right up against the text

Now; we still want to be able to use icons on buttons that aren’t the default. Problem is, we’ve now created a pseudo-class that always gets added, no matter what. What to do? No problem. We simply need to add some more code to detect whether there is an icon, and remove our pseudo class.

.elementor-button-icon + span.elementor-button-text::after {
    display: none;
}

What does this do? It uses a “+” CSS combinator to select any elements next to .elementor-button-icon. Then, it sets our default icon to disappear. Let’s check out the markup for a button with an icon next to it.

As you can see, .elementor-button-icon (a class added whenever you add a button icon) and .elementor-button-text are next to each other. This means we can use the + combinator (not used very often, but a great combinator) to select .elementor-button-text when .elementor-button-icon is present.

Once you’ve applied this CSS, you’ll be able to add custom icons to replace the default. One more thing I want to do—make sure the default color for all icons is set. Here’s a little CSS to do this:

.elementor-button-icon i, span.elementor-button-text::after {
    color: #f06724;
}

This CSS grabs any icon (.elementor-button-icon i), and the pseudo class we created (span.elementor-button-text::after), then sets a color for it. You can still override the color.

Hope this tutorial was helpful!

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn