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.
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.
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;
}
Session expired
Please log in again. The login page will open in a new tab. After logging in you can close it and return to this page.