Add icon in the background

By Stephen Walker

Updated Dec. 25, 2022

87 words

Reading time: 0.4 min.

This is a simple CSS that gives the appearance of placing a Font Awesome icon in the background.

Using Avada

Use a text element with content
Place the icon at the end
- Switch to code view
- Paste <i> code for your icon (e.g. <i class=”fa-regular fa-clouds”></i>)
Add class icon-bg to the text element
Add the CSS to local or global custom CSS

.icon-bg i {
position: absolute;
/* adjust spacing as needed */
bottom: 48px;
right: 48px;
opacity: .1;
/* adjust size as needed*/
font-size: 5em;
}

Originally published on Dec. 25, 2022

Avada Form Tooltip

Avada, CSS, JavaScript
Fixed Floating Container
This creates a floating container. More to come.

Avada, CSS
Get your image to fill the space
This is a style I recently used on my blog post title bar to have the feature image fill the column without having to use a background image.
Avada, CSS
Table of Contents Border
I have seen some tables of contents around the web that use what appears as a left border, and the border color changes when highlighted. This feature is missing from the current version of Avada, so I created CSS styling to do this. It works best with a single-level list. […]
Avada, CSS
RSS Feed
This gives the default RSS feed widget a more polished appearance.
Avada, CSS
Skew Pagination Preview
Another example of using a skewed background, this time targeting the pagination preview. Additionally, this limits the width of the preview and allows the text to wrap. Lastly, a clip-path is used to give the featured image a skewed appearance.
Avada, CSS
Skew Column Background
This allows you to create a skewed background for columns on the left and right. Change skewX to skewY, and it will be on the top and bottom. More tips like this from Kevin Powell.