Elementor Background Image : Design Sections with Awesome Icons Backgrounds!

How to properly use icons as a section background! Also works with Font-Awesome!

Watch the video, or keep reading! The video covers how to filter the icons by license and how to modify them (both are not covered in the written version).

For starters, here are a few demo sections built using what we will learn.

Got the sections from the Elementor templates, just added an icon background.

Our Clients

Driving technology for leading brands
Elementor Background Image - Use Icons and SVGs as Background
Elementor Background Image - Use Icons and SVGs as Background
Elementor Background Image - Use Icons and SVGs as Background

Our company is a collective of amazing people striving to build delightful products.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using.

First, find an icon you like, set a background color to the section, then set the icon as background overlay

Verify that you have SVG uploads enabled in your elementor settings here :

You can find great icons at www.iconfinder.com, and many other websites. With icon finder it is easy to filter by license, if you are looking for free icons.

Then, simply add the icon as a background overlay, and adjust the settings

Set a background color for the Background Overlay option to show up. 

Adjust everything for mobile and tablet view also!

Elementor Background Image - Use Icons and SVGs as Background

Finally, if you want to rotate the icon and change it's color, use this website

http://vectorpaint.yaks.co.nz . (you could also use Illustrator of course) See the video for more instructions on modifying the icon.

Here are examples sections with a modified icon.

Write me

For any inquiries please email

emailme@company.com

Strategy planning

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Graphic design

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet

Management

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet

Developing

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet

Also works with animated SVGs!

I used www.anigen.org to create the animation. You will need to modify the icon opacity before uploading it to avoid a bug. Set as background instead of background overlay.

How to animate an icon goes beyond the scope of this article; let me know if you are interested though.

Strategy planning

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Graphic design

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet

Management

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet

Developing

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet

Using Font-Awesome Icons

Yes! We can use Font-Awesome Icons also!

However, it will require some custom CSS code, and getting it to look perfect on mobile and tablets is a little bit more challenging.

Here is an example section

Write me

For any inquiries please email

emailme@company.com

To accomplish this, you will need to give the section a CSS class

Here, 'iconbackground' is used for the CSS class name. Important: while you are here, set the section to overflow:hidden. Otherwise you will get some horizontal scrolling.

Elementor Background Image - Use Icons and SVGs as Background
Easily Remove Elementor Horizontal Scroll on Mobile Devices
Set Overflow Hidden

Then, add all of this CSS code to your place of choice

You will have to test and adjust the font-size, bottom and left values to fit your needs. Test for tablet and mobile view also, and set the CSS for these (using @media queries).

.iconbackground:before {
font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f0e0";
font-size: 44em;
position: absolute;
color: white;
opacity: .4;
bottom: -40%;
left: 39%;
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
z-index: 0;
overflow: hidden;
}

@media (max-width: 481px) {
.iconbackground:before {
font-size: 21em;
bottom: -10%;
}
}

To use another icon, simply go to the Font Awesome Cheat Sheet page

It can be found here. When you found the value for the icon you want, replace it in the CSS code. Change that :' content: "\f0e0";   '.

Important: If you use Font Awesome Pro icons, you will need to change this: font-family: "Font Awesome 5 Free";    to that:  font-family: "Font Awesome 5 Pro";

Finally, to get the icon filled rather than just outlined, change that: font-weight: 400;  to this:  font-weight: 900;   . The example below is the exact same icon as the one above, but with a different font-weight value.

Et voila! Thanks for reading!

Write me

For any inquiries please email

emailme@company.com

Leave a Reply

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