Toolonomy Logo

How to Create Beautiful Custom Icon List in Oxygen Builder

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.
Mohammed Wasim Akram
Blog Post Author
Last Updated: March 21, 2022
Blogpost Type:
0 Shares

If you started your journey with Elementor, Divi, or any other popular website builder and recently started using Oxygen then you might be thinking about 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
  • Save

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 to 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

The first thing you need to use is 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 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, and 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.

Thank you for visiting Toolonomy.com!

0 Shares
Toolonomy Online Community Image
Join Toolonomy Community
Toolonomy Community is a dedicated place to explore the Discussion, Content, Deals & Hidden Details about the Business Development Tools that have the potential to help you succeed in your journey to Digital Entrepreneurship by letting you build, manage, and grow your Business Online with ease.
Free Membership
A Google & HubSpot Certified Digital Marketing Specialist, Self-Taught WordPress Expert, Useful BizDev (Business Development) Tools & Deals Explorer, and the Founder of SyncWin & Toolonomy.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Related Blog Posts
Explore all the other related blog posts.
WordPress
Best WordPress Table Builders: Top Free & Paid Plugins
As content creators when it comes to creating comparison posts inside WordPress, we need table builder plugins, so here I am presenting the best table builders loved and trusted by WordPress community. ...
WordPress
Best WordPress Anti-Spam Plugins
You might be wondering how can you keep your site safe from hackers and spammers, if yes then consider reading this post here I shared the top five plugins that can save your brand reputation from getting hamppered...
Artificial Intelligence
Best ChatGPT Addons: Handpicked Free Google Browser Extensions
In this article, you will discover some of the very useful and unique add-ons for ChatGPT which have the potential to enhance your workflow while using this AI-powered chatbot application....
Explore Blog

Become a Toolonomy Community Member for Free!

Consider joining our Official Community Group if you want to get access to exclusive insider content and information about Exclusive Digital Products and Technologies. Also, you will be able to get involved in interesting group discussions with like-minded people that are interested in similar topics as you.
Free Membership
Made with ❤ for Digital Product Enthusiasts
Copyright © 2018 - 2023 by SyncWin | All Rights Reserved.
Top crossmenu
0 Shares
Copy link