Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages
Filter by Categories
Digital Marketing
Email Marketing
Entrepreneurship
Oxygen Builder
Search Engine Optimization
Social Media Marketing
Web Design & Development
Web Strategy
WordPress

How to Create Beautiful Custom Icon List in Oxygen

Written by:
Mohammed Wasim Akram
First Published on:
September 9, 2020
Last Updated on:
December 3, 2020

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 wanna 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 wanna 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 wanna 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://syncwin.com/wp-content/litespeed/localres/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 wanna 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.

Affiliate Disclaimer

Please note I 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 buying them.

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

Leave a Comment

Blog Categories

Popular Posts

WordPress Support - Sidebar Widget Ad Banner Image - SyncWin
Piotnet Forms Plugin - Image Ad Banner - SyncWin
Hydrogen Pack Plugin - Image Ad Banner 02 - SyncWin
Advanced Scripts WordPress Plugin - Image Ad Banner - SyncWin
SyncWin Community Group Ad Banner Image - SyncWin
Top arrow-circle-o-downmenu-circlecross-circlechevron-down-circle linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram