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
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!
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.
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
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.
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.
