Icons can be a great design element to help guide users and provide visual interest. Avada provides a variety of ways to use icons, but occasionally, it is no intuitive. These are some basic layouts and options you can use.
The Icon Element
Icon 1 with background set to -1
Icon 2 with background set to 0
Icon 3 with background set to -1 but the background opacity set to 0 (transparent)
This is the basic icon element and while simple to implement, sometimes frustrating because the relationship between the background and the icon is not intuitive. Here are two icons, with all but one setting the same. One with the background set to -1 (auto) and one set to 0. Notice the change in alignment. Removing the background inexplicably adds a left margin. The easiest way to overcome this is to set your background color to match or set it to transparent (icon 3), but this is a bug in my opinion.
The Layout
By default, the icon appears to be a block element which means it takes the full width and forces the content that follows below. This is actually related to the divs that get added by Avada, and there is little you can do using the element. The solution for creating the inline appearance, using the element, is the flexbox features or nested columns or both.
This first example is flexbox in action. Create a 1/1 nested column, set the direct to row, add the icon and the title element and adjust as needed.
The Title of a Section
Next is a nested columns example with two columns. The first column with the icon, has the column width set to auto. The second is adjust to fit your content. This can be useful if you want to use background colors and create a more designed appearance.
The Title of a Section
John Smith
Acme, Inc.
John Smith
Acme, Inc.
John Smith
Acme, Inc.
Content Card Layout
Using the negative margin and the column overflow settings allows you to easily replace the most common content cards and that element could be turned off.
John Smith
Lacinia porro ipsa urna vel interdum class nisi nesciunt occaecati deserunt eum.
John Smith
Lacinia porro ipsa urna vel interdum class nisi nesciunt occaecati deserunt eum.
Inline Text
Since the majoirty of the icons that come with Avada are provide by Font Awesome, you can use the font-awesome style <i class=”icon name icon style”></i> — — or if you are using the Font Awesome plugin to get access to all the pro icons, you can use the shortcode [ name=”mug-saucer” prefix=”fat”] — [icon name=”mug-saucer” prefix=”fat”].
If there are other variations that you would like to see, let me know.
