Maybe, one day WHMCS will be complete. In the meantime users have to do their own modifications to make it work to suit.
In this case, the 123host knowledgebase category icons looked boring and unintuitive
I understand that these are categories that contain articles and pedantically the folder icons are correct. But the labels already tell us there is more than one article, so we can get creative without compromising the UI.
Isn’t this prettier and more intuitive?
Modifying your template is easy-peasy. Of course the file to edit depends on which template you are using. I am going to assume twenty-one
and that you have a child template twenty-one23host
First thing, make a backup if you are worried, but these are template files so it is easy to roll back to the parent version.
If it doesn’t already exist in your child theme, copy /templates/twenty-one/includes/knowledgebase.tpl
to your child theme /templates/twenty-one23host/includes/knowledgebase.tpl
and then open that file to edit.
At about line 18 you will find
<span class="h5 m-0">
<i class="fal fa-folder fa-fw"></i>
replace it with
<span class="h5 m-0">
{if $category.name eq 'Domains'}
{$caticon='fa fa-globe'}
{elseif $category.name eq 'Email'}
{$caticon='fa fa-envelope'}
{elseif $category.name eq 'Hosting'}
{$caticon='fa fa-server'}
{elseif $category.name eq 'Security'}
{$caticon='fa fa-lock'}
{elseif $category.name eq 'Setup'}
{$caticon='fa fa-cog'}
{elseif $category.name eq 'WordPress'}
{$caticon='fab fa-wordpress'}
{/if}
<i class="{$caticon}" aria-hidden="true"></i>
We have used Smarty to do some string comparisons and set the fontawesome icon based on the result. Notice that the WordPress icon needs fab
, the others don’t. Also notice that we have improved accessibility by adding aria-hidden="true"
to hide the icon from machine readers – there’s no need to bog them down with decorative stuff – take note WHMCS (they won’t).
You may have more or less categories and will need to tweak it accordingly. This works and isn’t hard to maintain when a new category is added.
Grab the fontawesome icon code from https://fontawesome.com/v5.9/icons