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
A Google & HubSpot Certified Digital Marketing Specialist, Self-Taught WordPress Expert, Useful BizDev (Business Development) Tools & Deals Explorer, and the Founder of SyncWin & Toolonomy.
0 0 votes
Page Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Related Blog Posts
Explore all the other related blog posts.
WordPress
WP Social Ninja Review: Best Social Plugin for WordPress
If you're looking for a social media integration powerhouse for your WordPress projects that can help you showcase your social feeds, reviews, and a cross-platform chat widget on your websites then stick with me as...
Video
Best Video Streaming Tools: Perfect for Twitch & YouTube
Explore the Best Video Streaming Tools that we handpicked for you then shortlist the ones you find potentially helpful to stream videos online in order to productively manage and grow your business easier, faster, ...
WordPress
WordPress Syntax Highlighter Plugins: Side-by-Side Comparison
If you're looking for a syntax highlighter code embedding plugin for your blog to showcase your codes on your WordPress blog posts in a beautiful and organized manner then this blog post will find the best plugin f...
Explore Blog

Become a Toolonomy Community Member for Free!

Consider joining our Official Community Group if you want to get access to the exclusive insider content and information around the Exclusive Business Development Tools. 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 Entrepreneurs
Copyright © 2018 - 2022 SyncWin | All Rights Reserved.
Top crossmenu
0 Shares
Copy link
Powered by Social Snap