How to Change the Close Button Icon on Elementor Popup

Are you struggling to customize your Elementor popup to match your products, services, or brand identity? One common pain is the default close button icon. As you already know, there is no built-in option to change or replace the default close button icon on the Elementor popup with another icon.

Luckily, with a few tweaks to your Elementor popup template settings, you can easily replace this icon with something that perfectly matches your aesthetic design.

This article will walk you through the process of adding a CSS snippet to your Elementor popup template so that you can replace the default close button icon on the popup with any custom icon you choose from the online icon library.

Steps to Change the Default Close Button Icon on Elementor Popup

Before we start the tutorial, we would like to inform you that the Elementor Popup Builder is only accessible on the Elementor Pro. So, please ensure that you’ve already upgraded to the pro version of Elementor.

Step 1: Add the Elementor Popup Template

In your WordPress dashboard, go to Templates -> Popups. Once you enter the popups block, add a new template or select the existing one.

Once you enter the Elementor popup builder, start to customize the design and content of your popup using Elementor’s drag-and-drop interface.

The close button is already activated by default; to ensure it, you can check the option by navigating to the Popup Settings -> Layout -> Close Button. Afterward, tweak and style up your close button with your preference (Style tab -> Close Button).

Step 2: Get the Unicode for your Preferred Icon

As we mentioned at the beginning of this article, we will change the close button icon on Elementor and replace it with your preferred icon from the online icon library.

Icons often come from libraries like Font Awesome, Bootstrap Icons, etc. In this example, we use the Font Awesome 5 Free to search and get the Unicode of the icon we want. Click here, then search for the close button icon you want.

Once you find the icon, click on it to view the details. Next, copy the Unicode (e.g., \f273 for a calendar time in Font Awesome 5 Free). Keep it, and we will use it later in the next step.

Step 3: Add the Custom CSS

Next, we’re going to add the CSS snippet to the Popup Settings. Please copy this CSS snippet below and paste it into the Custom CSS input field (Popup Settings -> Advanced tab -> Custom CSS).

Here’s an example of a CSS snippet that you can use:

/* Hide the default close icon */
.dialog-close-button.dialog-lightbox-close-button .eicon-close {
    display: none;
}

/* Add custom icon */
.dialog-close-button.dialog-lightbox-close-button::before {
    content: "\f273"; /* Replace this with the Unicode for your desired icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 25px;
    color: #000000;
}

It is done. As you can see from the image above, the default close button icon is replaced once you add the CSS snippet. Don’t forget to save or publish your popup template if you want to.

What did the code do?

Hiding the default Close Button Icon

• Selector: .dialog-close-button.dialog-lightbox-close-button .eicon-close
  • This targets elements with both dialog-close-button and dialog-lightbox-close-button classes, and within those, elements with the eicon-close class.
• Property: display: none;
  • This removes the default close button icon from the popup layout.

Adding the Custom Icon

• Selector: .dialog-close-button.dialog-lightbox-close-button::before
  • This targets the ::before pseudo-element of elements with both dialog-close-button and dialog-lightbox-close-button classes.
• Property: content: "\f273";
  • This sets the content of the ::before pseudo-element to a specific Unicode character (in this case, \f273), which corresponds to an icon in the Font Awesome 5 Free library.
• Property: font-family: "Font Awesome 5 Free";
  • This specifies the font family to use, Font Awesome 5 Free.
• Property: font-weight: 600;
  • This sets the font weight to 600, making the icon bold.
• Property: font-size: 25px;
  • This sets the size of the icon to 25 pixels.
• Property: color: #000000;
  • This sets the color of the icon to black.

The Bottom Line

This article By following the steps outlined in this article, you can easily replace the default close button icon with one that aligns seamlessly with your overall website design.

In the end, the user experience can be enhanced by making this minor adjustment, which will result in a more cohesive and visually pleasing user interface, ultimately improving the overall user experience. Feel free to style your icon to your preference by adjusting the property values in the CSS snippet.