How to add badge icons

To add one of the standard icons before a badge, use the following format by adding a icon name separated by a colon (:):

Available Icons:

award
bag-check
balloon-heart-fill
bell
bookmark-heart
bookmark-star
box2-heart
boxes
chat-heart-fill
check-all
check-circle
check-lg
check-square-fill
circle-fill
coin
controller
earbuds
emoji-frown
emoji-sunglasses
fire
gem
hand-thumbs-down
hand-thumbs-up
headphones
heart
house-check
lightning-charge-fill
music-note-beamed
patch-check
patch-exclamation
rocket-takeoff
star-fill
stars
trophy

Example:

To add the "award" icon with a badge "Editor's choice", use:

award:Editor's choice

Custom SVG Icons

To add custom SVG icons for badges, use the cegg_svg_icon_list filter. This filter allows you to easily extend the list of available icons by adding new ones. Below is an example of how to add custom icons:

function add_custom_icons($icons) {
    // Check-square icon
    $icons['check-square'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-square" viewBox="0 0 16 16"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/><path d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/></svg>';
    
    // Star-fill icon
    $icons['star-fill'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>';

    return $icons;
}
add_filter('cegg_svg_icon_list', 'add_custom_icons');

PreviousProducts page NextHow content is displayed

Last updated 2 months ago

function add_custom_icons($icons) { // Check-square icon $icons['check-square'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-square" viewBox="0 0 16 16"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/><path d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/></svg>'; // Star-fill icon $icons['star-fill'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>'; return $icons; } add_filter('cegg_svg_icon_list', 'add_custom_icons');