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

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: