Updated on August 10, 2020

The default icons in Oxygen’s Toggle element are + and – for expanding and collapsing respectively. If you want to change these to > and ∨ follow the steps below.

Step 1

Add the following code snippet:

Name: Enqueue Font Awesome JS

Code:

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

    wp_enqueue_script( 'font-awesome-latest', 'https://kit.fontawesome.com/d7aea42b6c.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;

}

In the above https://kit.fontawesome.com/d7aea42b6c.js is the URL of Font Awesome Kit for the latest version 5 (with version 4 compatibility) created from my account. You may want to generate your own kit at FontAwesome website and replace that URL.

Step 2

Add the following CSS:

.oxy-expand-collapse-icon {
    margin-right: 0.8em;
    height: auto;
}

.oxy-expand-collapse-icon::before {
    background-color: transparent;
    border-radius: 0;
    content: "\f107";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    position: static;
    font-size: 32px;
}

.oxy-eci-collapsed.oxy-expand-collapse-icon::before {
    content: "\f105";
}

.oxy-expand-collapse-icon::after {
    display: none;
    transform: none;
    position: static;
}

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

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: