How to show elementor icons using css

Usually, if we want to show an icon through CSS somewhere then our only option is to use Font Awesome icon

However, we often want to use the default icons on our website because we don’t want to slow down the website using Font Awesome’s CDN.

We are using Elementor page builder on the website and it has many icons

However, the problem is that the icons are in SVG file format. Unfortunately, SVG files cannot be used directly in CSS

For that, we need to use a converter. Let’s take a look at the whole process

I suggest you to watch the video first

:before{
    content: "";
    display: inline-block;
    width: 16px; /* Icon width */
    height: 16px; /* Icon height */
   margin-right: 8px;
    background: no-repeat center / contain;
    background-image: url('add base64 code');

}

Make sure you have added a Selector Before the :before CSS code. That should look like

a:before{ code } or span:before { code }