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