How to change the expand and collapse icons in Oxygen’s Toggle element

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;
}