Frequently Asked Questions (FAQs) Related To Elementor Here Are The Step By Step Process

Here are the most Frequently Asked Questions i found on Elementor’s community and forum and here are the answer step by step tutorials easily to digest

How to manually change the social share icons widget?

Some people might tell you to change icon like other widget have but the thing is there are no option available to choose from except adding new item from libraries.

Now the question is how to change the social share icon manually?

There are 2 ways to change the icon and here are the steps you need to follow

01

Using Inline SVG Method –

This method is the best method for optimizing website performance because this will not called any font and icon libraries but at the same time it will save you around 70 to 80 KB . It require little bit of CSS knowledge.

There are so many icons collection available one of them is iconmonstr. This is one of my favorite icons libraries because you can choose inline SVG , SVG, PNG, EPS and PNG as file format. But in this demo i am going to use inline SVG because of performance benefits.

First go to iconmonstr and search your icons.

In this demo i will use Facebook logo

Second choose your icon and follow the step below

1. Choose icon ( Facebook)
2. Select I agree to the License Agreement
3. Embed – choose inline not Base64

1. Go to page/post you want to add social share buttons or go to single post template .
2. Edit with Elementor
3. Click the share buttons widget
4. Select “view” as Text, this will remove all the default icon.

Copy and paste svg code to the custom label area.

This will create styling issue when you add the code. See the screenshot below.

Instead of adding code directly to the Custom Label. Open up your favorite code editor & paste the code there and create a div with class and add class to the svg for styling.

<! –– Before ––>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path
        d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"
    />
</svg>
Facebook


<! –– After ––>
<div class="icon-wrapper">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/></svg> Facebook
</div>

/*This is the svg wrapper class*/
.icon-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/*svg class*/
.icon{
    /*You cannot use color attributes to the inline svg that is why we are using fill property*/ 
    fill:#fff;
    /* Width of SVG*/
    width:1em;
    /*This will add margin to the right side of svg , so there will be some breading room*/ 
    margin-right:5px;
}

Here are the result.

What about the icons that you create in vector tools ?

You’ve got it cover.

1. First to svgminify
2. Upload your svg icon or Drag & Drop SVG icon
3. Click start button
4. It will print out SVG code

Don’t copy and paste entire code just copy <svg>……</svg>. SVGMinify will split the code and then minify

<! –– This is How Unminify looks ––> 
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.4142" version="1.1" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
    <path
        d="m22.675 0h-21.35c-0.732 0-1.325 0.593-1.325 1.325v21.351c0 0.731 0.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463 0.099 2.795 0.143v3.24l-1.918 1e-3c-1.504 0-1.795 0.715-1.795 1.763v2.313h3.587l-0.467 3.622h-3.12v9.293h6.116c0.73 0 1.323-0.593 1.323-1.325v-21.35c0-0.732-0.593-1.325-1.325-1.325z"
        fill="#00f"
        fill-rule="nonzero"
    />
</svg>

<! –– After minification ––> 
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.4142" version="1.1" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
    <path d="m22.675 0h-21.35c-0.732 0-1.325 0.593-1.325 1.325v21.351c0 0.731 0.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463 0.099 2.795 0.143v3.24l-1.918 1e-3c-1.504 0-1.795 0.715-1.795 1.763v2.313h3.587l-0.467 3.622h-3.12v9.293h6.116c0.73 0 1.323-0.593 1.323-1.325v-21.35c0-0.732-0.593-1.325-1.325-1.325z" fill="#00f" fill-rule="nonzero"/>
</svg>

If you add this code directly this will cause some styling issue like the screenshot below which is ugly.

In order to fix the issue on the editor , you need to add width and height to the svg itself . See the screenshot below.

If you want to define your own color follow the step below –

1. Want to define fill color with CSS to the svg?
2. First remove fill=” from the SVG code
3. Add it to Social share button – Custom Label

<! –– After defining with and height of SVG ––>
<! –– Remove comments when adding ––>

<div class="icon-wrapper">
    <svg class="icon"  width="20" height="20" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.4142" version="1.1" viewBox="0 0 24 24" xml:space="preserve"  xmlns="http://www.w3.org/2000/svg">
        <path
            d="m22.675 0h-21.35c-0.732 0-1.325 0.593-1.325 1.325v21.351c0 0.731 0.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463 0.099 2.795 0.143v3.24l-1.918 1e-3c-1.504 0-1.795 0.715-1.795 1.763v2.313h3.587l-0.467 3.622h-3.12v9.293h6.116c0.73 0 1.323-0.593 1.323-1.325v-21.35c0-0.732-0.593-1.325-1.325-1.325z"            
            fill-rule="nonzero"
             
        />
    </svg>
    Facebook
</div>

Result

02

Base64 Data-URL/Data-URI Method

Let say you download icons from somewhere and it doesn’t provide you svg format. In this case you can use Base64 Data-URI method which will inline in the document of your page similar to inline SVG.

This method is mainly useful for small images but don’t use it on large images because your document size will significantly increase like double the size of your images.

There are 2 ways to do in which choose one – Data-URL is provided & Added directly to Pseudo elements classes

1 ^st Option – If Data-URL is provided

1. copy data:image/svg+xml;base64,…..
2. Open Code editor
3. Create Div with class & img with class of icon-wrapper and icon respectively
4. And add your code there (see screenshot below)

Code will be something like this

<! –– Before ––>
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjIuNjc1IDBoLTIxLjM1Yy0uNzMyIDAtMS4zMjUuNTkzLTEuMzI1IDEuMzI1djIxLjM1MWMwIC43MzEuNTkzIDEuMzI0IDEuMzI1IDEuMzI0aDExLjQ5NXYtOS4yOTRoLTMuMTI4di0zLjYyMmgzLjEyOHYtMi42NzFjMC0zLjEgMS44OTMtNC43ODggNC42NTktNC43ODggMS4zMjUgMCAyLjQ2My4wOTkgMi43OTUuMTQzdjMuMjRsLTEuOTE4LjAwMWMtMS41MDQgMC0xLjc5NS43MTUtMS43OTUgMS43NjN2Mi4zMTNoMy41ODdsLS40NjcgMy42MjJoLTMuMTJ2OS4yOTNoNi4xMTZjLjczIDAgMS4zMjMtLjU5MyAxLjMyMy0xLjMyNXYtMjEuMzVjMC0uNzMyLS41OTMtMS4zMjUtMS4zMjUtMS4zMjV6Ii8+PC9zdmc+" alt="facebook-icon">
Facebook


<! –– After ––>
 <div class="icon-wrapper">
    <img class="icon" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjIuNjc1IDBoLTIxLjM1Yy0uNzMyIDAtMS4zMjUuNTkzLTEuMzI1IDEuMzI1djIxLjM1MWMwIC43MzEuNTkzIDEuMzI0IDEuMzI1IDEuMzI0aDExLjQ5NXYtOS4yOTRoLTMuMTI4di0zLjYyMmgzLjEyOHYtMi42NzFjMC0zLjEgMS44OTMtNC43ODggNC42NTktNC43ODggMS4zMjUgMCAyLjQ2My4wOTkgMi43OTUuMTQzdjMuMjRsLTEuOTE4LjAwMWMtMS41MDQgMC0xLjc5NS43MTUtMS43OTUgMS43NjN2Mi4zMTNoMy41ODdsLS40NjcgMy42MjJoLTMuMTJ2OS4yOTNoNi4xMTZjLjczIDAgMS4zMjMtLjU5MyAxLjMyMy0xLjMyNXYtMjEuMzVjMC0uNzMyLS41OTMtMS4zMjUtMS4zMjUtMS4zMjV6Ii8+PC9zdmc+" alt="facebook-icon">
        </svg>
         Facebook
</div>

The problem with this method is you don’t have any control over color which make it harder to style. Since it is not a vector base so the quality is not so good.

What about if you don’t want to add the code like i shown above ? that time you can change & replace the code with fontawesome icons or Data-URL.

2^nd Options – Inline directly with pseudo class

Let say you don’t want to load fontawesome icon at all, here are the solution. Watch the video above

1. Download your icon can be in any format – svg or png
2. Go to websemantics
3. Drag and drop your icon directly to the area
4. Choose Data-URL as prefer selection (see screenshot)
5. Click the social Share button( Follow tutorials above)
6. Go to Advanced – CSS classes – add your class name( Follow tutorials above)
7. Custom CSS( Follow tutorials above)

03

Replace Old FontAwesome icons with New FontAwesome icons using Pseudo Elements

1. Right click on icon you want to change and right click on inspect elements
2. This will open Dev tools
3. find the ::before
4. Copy the code and paste in your code editor

Now –

1. Go to FontAwesome
2. Copy the unicode by clicking (f082)
3. Go to single post template or post
4. Edit with Elementor
5. Click the social Share button
6. Go to Advanced – CSS classes – add your class name
7. Custom CSS

Here the code

.social .fa-facebook:before{
     content: "\f39e";
}

Here are some examples you can do it with Pseudo elements

How to style last menu item with CSS?

People might tell you to use last item or nth-child item selector it works most of time but it is not that easy to figure it out unless you know CSS very well.

So here the simplest solution i found and it is really easy to do it.

1. Go to Appearance then Menus
2. Click the Screen Options on top right corner
3. Checked “CSS Classes” option
4. Select your menu
5. Click the last item ( most likely Contact us page)
6. Go to CSS Classes (optional) – Add your unique name

Now we need to add custom CSS to the header template, This is for Elementor pro user –

1. Go to Templates
2. Theme Builder
3. Header
4. Choose your header
5. Edit with Elementor
6. Click nav menu widget
7. Advanced tab – advanced
8. CSS classes – Define your unique class
9. Custom CSS

/* .last-item is the nav class i define and .contact-form is the css for nav menu*/
.last-item .contact-form{
    background: #000;
}
/* This CSS is for link color*/
.last-item .contact-form a{
    color:#fff;
}

if you’re not using Elementor pro than you can head over to Customize or child theme – style.min.css area or if you’re using plugin to add your own CSS. Add the CSS rule –

/* Style as needed*/
.contact-form{
    background-color: #000;
}
/* This CSS is for link color*/
.contact-form a{
    color:#fff;
}

FontAwesome icons not loading on browser

You have created beautiful landing page for your project. On Editor icons are loaded perfectly but on live site you saw a border around an icon. Something like this

Turn out to an easy fix. When Elementor released v2.6 which includes an update to the Font Awesome 5. Due to migration and updating process some of your FontAwesome 4 libraries might not loaded.

In order to fixed the issue Elementor has added a feature in Advanced tab – Load Font Awesome 4 Support which adds

Font Awesome 4 support script (shim.js) is a script that makes sure all previously selected Font Awesome 4 icons are displayed correctly while using Font Awesome 5 library

Migration to Font Awesome 5

Is it OK To Remove Font Awesome icons and Elementor icons for performance?

It is great to remove Font Awesome and Elementor icons for Performance because this can save you more than 100 KB + 6 stylesheets that huge. If you want to remove globally and speed up a slow website .

But nobody method what is going to happen if you remove them ?

Before

After

Did you see the difference ?

See the Search icon, Sub-Menu navigation, Close Menu , Hamburger menu ( if you’re using Elementor nav menu widget) etc on first then see second.

Please keep that in mind that before implement such thing you must make sure that all the Font Awesome and Eicons are not loaded.

If You have any question related to Elementor that come up regularly. Please post your question in comment section?

I will properly credited you

Thank you