Generic selectors
Exact matches only
Search in title
Search in content
Filter by Categories
Advanced Scripts
Amazon SES
Amazon Web Services
BasePress
Blocksy Theme
Brand Building
Bricks Builder
BunnyShell
Cloudflare
CSS
Digital Marketing
Elementor
Email Marketing
Entrepreneurship
Fluent CRM
Fluent Forms
Fluent SMTP
GoDaddy
Google Fonts
HTML
Hydrogen Pack
JavaScript
Jetpack
Kadence Theme
LiveCanvas
Meta Box
Online Business
Oxygen Builder
OxyMade
PHP
Piotnet Forms
Pods
SaaS
Scripts Organizer
Search Engine Optimization
Social Media Marketing
Swiss Knife
Web Design
Web Development
Web Strategy
WordPress
Work From Home
Zion Builder

How to Create Beautiful Custom Icon List in Oxygen Builder

Written by:
Mohammed Wasim Akram
First Published on:
September 9, 2020
Last Updated on:
June 21, 2021
Post Categories:
✼ Disclaimer: SyncWin is user-supported therefore this page may contain our affiliate links and if you purchase something using those links, we may get some commission without any additional cost to you. Click to Learn More.

Please note we want to keep things crystal clear that this page may contain some of our affiliate links. Also, we don't know, use or recommend every product we link to, so please do your due diligence before making your buying decision.

However, there are very few selected products that we trust, use, and recommend to our readers and community, and we always mention that on our website which you could also find on our dedicated Recommendation Page.

Hence, if you make a purchase using any of those links, then it is safe to assume that we might get a small amount of commission without any additional cost to you, which helps and encourages us to produce more helpful content like this for you.

Feel free to explore our Legal Policy Pages.

If you started your journey with Elementor, Divi, or any other popular website builder and recently started using the Oxygen then you might be thinking how to set up a beautiful icon list in Oxygen, then I've got you covered.

In this post, I will share with you my step by step methods of creating a beautiful icon list using some HTML, CSS, and Font Awesome icons for a section like a pricing box or features box.

There are mainly two methods to create an icon list in Oxygen:

#1 Using Raw HTML & CSS and #2 using the built-in Oxygen Elements, but for now in this post, I will cover only the first method as it's an easy and lightweight solution.

Oxygen Icon List Mockup - Image - SyncWin

The final icon list would look just like similar to the above image if you use it in a pricing box as I did.

Setup Basic Icon List with HTML & CSS

So the very first thing that we are going do is to use <ul> and <li> HTML tags to create an unordered list using the Oxygen Code Block element.

After that, we will use some exclusive Font Awesome utility styling to replace the regular bullets with any of the Font Awesome icons we want.

Initial List Item with Bullet Points

First thing you need to use the below HTML to set up the foundation of your icon list.

/* Initial List Item with Bullet Points */

<ul>
  <li>List Item One</li>
  <li>List Item Two</li>
  <li>List Item Three</li>
</ul>

Setup The Icon List Using Font Awesome

Once you have added the above HTML to the Oxygen Code Block element then add this class="fa-ul" utility class name under the opening <ul> tag just like this <ul class="fa-ul">.

Now you also need to add a opening span containing a utility class just after each of the opening <li> tag, that will look like this <li> <span class="fa-li">.

Once that is done you need to place a Font Awesome icon you need within the <i> ...</i>, which you can find on their official website, then add a closing span, then it will look like this <i class="fa fa-star-half-full"></i></span>.

The next step would be to add your text for that list item and then close that with the </li> tag.

Now the complete line should look like this: <li><span class="fa-li"><i class="fa fa-star-half-full"></i></span>Your text will go here</li>.

Here is the complete HTML for you to copy, paste, and edit as you want for your icon list.

If you want to add more items to your list then just copy any of the lines that start with <li> and end with </li> next to the last line just before the </ul> tag.

/* Setup The Icon List Using Font Awesome */

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fa fa-asterisk"></i></span>List item One</li>
  <li><span class="fa-li"><i class="fa fa-check-square-o"></i></span>List Item Two</li>
  <li><span class="fa-li"><i class="fa fa-star-half-full"></i></span>List Item Three</li>
</ul>

Styling The Icon List Using CSS

Once you create the icon list using the above method, you might want to use different colors for your icons and texts.

So here is the trick, just copy and paste the below CSS snippet to your stylesheet and change the hash color code as per your choice.

/* Styling The Icon List Using CSS */

/* Change Color of The Entire Icon List */
.fa-ul {
  color: #000000;
}

/* Change Color of The Font Awesome Icons */
.fa-li {
 color: #FF0000;
}

Load Font Awesome Icons to The Frontend & Backend of Oxygen Builder

This step is the final and crucial step to set up the icon list with Font Awesome, if you ignore this step then the icons will not work.

Actually, Font Awesome icons don't load to the frontend and sometimes to the backend of the Oxygen as well, so if you use the custom method to place the icon to a page within the <i> ...</i> tag like this <i class="fa fa-star-half-full"></i>.

You can use a plugin like Advanced Scripts (Paid) or Code Snippets (Free) to add the snippets that I am going to share below.

Load Font Awesome Using A Function PHP Code Snippet

Now we need to put some extra work to make it load to the frontend as well as the backend of Oxygen, otherwise, the icons you are going to use in your icon lists will not be work and it will only output the normal bullets.

Therefore to solve this problem I have managed to arrange a function PHP code snippet that you need to add to the function file of your website using the Code Snippets plugin or any other method you like.

Here is the code that doesn't require any editing, just copy and paste it, simple.

/* Load Font Awesome to The Oxygen Frontend & Backend */

if (! function_exists('sw_fontawesome_custom_setup') ) {
  function sw_fontawesome_custom_setup( $kit_url ) {
    foreach ( [ 'wp_enqueue_scripts' ] as $action ) {
      add_action(
        $action,
        function () use ( $kit_url ) {
          wp_enqueue_script( 'font-awesome-kit', $kit_url, [], null );
        }
      );
    }
  }
}

sw_fontawesome_custom_setup('https://use.fontawesome.com/releases/v5.14.0/js/all.js');

Load Font Awesome Through An HTML Head Element

If you don't want to play with the function files and looking for a simple solution to load Font Awesome to your Oxygen website then just copy the below HTML and paste it to <head> using a plugin like Head, Footer & Post Injections.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />

Load Font Awesome Through Our FAWPI Plugin

Also, you can install our FAWPI Plugin to make the icons display even without loading them locally if you don't want to play with the code snippets as this is just the Plug and Play method of displaying FontAwesome in the Oxygen.

Password: 123456 (Use this password on the download page to access the file)

Conclusion

When I started using Oxygen it was very clear to me that I need to improve my skills and learn some coding languages to make certain things work just like this custom icon list, thus I started learning to use Oxygen to its full potential.

In this post, I have tried my best to explain everything about creating an icon list for a website built with Oxygen especially for beginners, and that is the reason I tried to keep things as simple as I could.

However, I would add alternative ways of creating the icon list in Oxygen soon, so if you don't want to miss out, then just add this post to your bookmark for future reference.

If you find this post valuable and helpful then consider sharing it with your community so that they also can take advantage of this resource.

Thanks a lot for spending your precious time on this website.

Become an Insider to Syncronize with Web-Success.

email Newsletter
Facebook Group
Subscribe to our newsletter to get insider wisdoms.
Join our community to connect with likeminded folks.
Join FB Group

Related Resource Posts

July 30, 2020
Hide Plugins from The WordPress Dashboard Plugins Page

In this article, I am going to share with you step by step process to hide any plugin you want from the WordPress Dashboard using Function PHP code.

Read More
August 11, 2020
How To Create A Beautiful Sidebar in Oxygen [Step by Step]

If you're new to Oxygen Builder then you must be confused about how to set up a sidebar as there is no such option available, therefore in this post, I am going to teach you to set up and design a sidebar in Oxygen step by step.

Read More
1 2 3 8

Leave Your Feedback

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Blog Categories

Favorite Products

WordPress Support - Sidebar Widget Ad Banner Image - SyncWin
SyncWin Community Group Ad Banner Image - SyncWin
Top menu-circlecross-circlechevron-down-circle
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram