How to add Font Awesome icons to Buttons in Oxygen Builder

In this tutorial I will show you a step by step guide on how to add a font awesome icon to a button object in Oxygen Builder using the CSS pseudo-element :before. There are only really two steps needed to accomplish this. Firstly enqueue the font awesome css file and secondly add the required CSS as a pseudo-element to your button. The final result we are looking for is this:

Font Awesome button

Step 1 - Enqueue Font Awesome CSS

The very first thing we need to do is enqueue the Font Awesome CSS, to do this, if you haven't already you will need to Install and activate the Code Snippets plugin. This plugin will allow you to add required code that you would normally add to your functions.php file.

Add a new Snippet, name it "Enqueue Font Awsome CSS", set it to "only run on site front-end" and add the following code:

<?php
add_action( 'wp_enqueue_scripts', 'custom_load_font_awesome' );
/**
 * Enqueue Font Awesome.
 */
function custom_load_font_awesome() {

    wp_enqueue_style( 'font-awesome-free', '//use.fontawesome.com/releases/v5.2.0/css/all.css' );

}
Snippets
Our added snippet

Step 2 - Add the required CSS to the button

Create your button as you would normally, as this tutorial is about adding a Font Awesome icon to the button, I wont go into the details of creating the button itself but when you have to button looking like you want it, click on the button and add a class called phone-num or some other descriptive name.

Next make sure that the new class you have assigned is selected and click on the state button. If there is a :before visible from the drop down list select it, if not click the "add state..." button to add it to the list.

Next make sure that the state :before is selected and select the "Advanced" tab and then the "Custom CSS" in the content text field you will need to add the unicode of the icon you want to use. You can find out what this is by using the https://fontawesome.com/cheatsheet in my case I want to use the icon phone which has a unicode of f095 enter it in the content field as \f095.

Lastly in the custom css section add the following css:
font-family: "Font Awesome 5 Free";
padding-right: 6px;

Save and you are done. You should now see the phone icon before the button text with a 6px padding between the icon and the text.

Firth Web Works ©2019 All Rights Reserved | Privacy Policy
homephoneenvelope
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram