Just circling back here as I’ve been helping @cagatay this morning on his site, and noticed that if you use a mixture of fa-brands and fa-solid then the code supplied above may produce some odd looking results.
If this is the case, replace the function with this
$(document).ready(function() {
$.getJSON('/api/categories', function(data, status) {
$.each(data.categories, function(key, value) {
var iconClass = 'fa'; // Default to 'fa' if the icon type is not recognized
// Check if the icon is FontAwesome Unicode
if (this.icon.startsWith('&#x') || this.icon.startsWith('')) {
iconClass = 'fa';
} else if (this.icon.startsWith('fab')) {
iconClass = 'fab';
}
var categorylist = $(" \
<li class='dropdown-item tree-root'><span class='category-menu'><i class='" + iconClass + " " + this.icon + "'></i><a style='display: inherit;' class='dropdown-item rounded-1' href='/category/" + this.slug + "'>" + this.name + "</a></span></li> \
<ul class='tree-branch' style='list-style: none;'>" +
this.children.map(c => {
var childIconClass = 'fa'; // Default to 'fa' for child icons
// Check if the child icon is FontAwesome Unicode
if (c.icon.startsWith('&#x') || c.icon.startsWith('')) {
childIconClass = 'fas';
} else if (c.icon.startsWith('fab')) {
childIconClass = 'fab';
}
return `<li class='dropdown-item tree-node'><span class='category-menu-tree-node'><i class='${childIconClass} ${c.icon}'></i><a class='dropdown-item rounded-1' style='display: inherit;' href='/category/${c.slug}'>${c.name}</a></span></li>`;
}).join(" ") +
"</ul>"
);
if ($(window).width() < 767) {
$(".bottombar #thecategories").append(categorylist);
} else {
$(".sidebar-left #thecategories").append(categorylist);
}
});
});
});
In fact, if you want to replace it anyway to make your experience “future proof”, you can use this code now 🙂
