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


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

    wp_enqueue_script( 'font-awesome-latest', '//', 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

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?


Find the article helpful and wish to donate?



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.

2 comments on “How to change the expand and collapse icons in Oxygen’s Toggle element”

  1. Hi Sridhar, is it possible to ad here, how to close an open toggle element when clicking on another closed toggle element to open it?

    Best regards

  2. i tried to use this but in front end the icon is not shown, there is a blank square ( in backend in the template is shows up correctly )

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: