Font Awesome Icons with Custom Tooltips in Oxygen

In Oxygen’s Facebook group a user asked:

How do I change the text tag for icons ?
Im using the Font Awesome icons and the tag is based on the name of the icon ?

I want to use a paper plane icon for email. SO I want to change the tag text to email rather than default witch is paper plane

As of v2.0 of Oxygen, it is not possible to change the default title that appears as a tooltip for icons added using Icon elements.

For example, let’s say you want to change the title of the paper-plane icon

from paper-plane to Email, we need to add the HTML and the necessary CSS in a Code Block.

In this tutorial, I share the steps to display a few Font Awesome icons manually.

Step 1

Let’s load the latest Font Awesome.

Install and activate Code Snippets plugin.

Add a new Snippet titled say, “Enqueue Font Awesome JS” having:

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

    wp_enqueue_script( 'font-awesome-latest', '//use.fontawesome.com/releases/v5.3.1/js/all.js', array(), null );

}

add_filter( 'script_loader_tag', 'add_defer_attribute', 10, 2 );
/**
 * Filter the HTML script tag of `font-awesome` script to add `defer` attribute.
 *
 * @param string $tag    The <script> tag for the enqueued script.
 * @param string $handle The script's registered handle.
 *
 * @return   Filtered HTML script tag.
 */
function add_defer_attribute( $tag, $handle ) {

    if ( 'font-awesome-latest' === $handle ) {
        $tag = str_replace( ' src', ' defer src', $tag );
    }

    return $tag;

}

Step 2

Inside the Oxygen editor, add a Code Block.

PHP & HTML:

<a href="#" title="Email"><span class="fas fa-paper-plane" aria-label="Email" role="img"></span></a>
<a href="#" title="Map"><span class="fas fa-map-pin" aria-label="Map" role="img"></span></a>
<a href="#" title="Phone"><span class="fas fa-phone" aria-label="Phone" role="img"></span></a>
<a href="#" title="Facebook"><span class="fab fa-facebook-f" aria-label="Facebook" role="img"></span></a>
<a href="#" title="Instagram"><span class="fab fa-instagram" aria-label="Instagram" role="img"></span></a>
<a href="#" title="Linkedin"><span class="fab fa-linkedin-in" aria-label="Linkedin" role="img"></span></a>

CSS:

#code_block-68-648 svg {
  width: 32px;
  height: 32px;
  color: #696b70;
}

#code_block-68-648 svg:hover {
    color: #afa58f;
}

#code_block-68-648 a:not(:last-child) {
    margin-right: 20px;
}

Replace all the instances of #code_block-68-648 in the above with the ID of the Code Block element.

Reference: https://twitter.com/RianRietveld/status/999553504967524353