How to replace FontAwesome Icons

[Romain Faure]

Hello guys,

I have developed a new WHMCS theme and want to use different icons than FontAwesome for primarynavbar, secondarynavbar and homepanel.

I have an error telling me that only FontAwesome works on WHMCS, can you help me change the editor?

Thank you very much.

[Romain Faure]

<?php

use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaPrimarySidebar', 1, function(MenuItem $primarySidebar)
{
if (!is_null($primarySidebar->getChild('Ticket Information'))) {
$primarySidebar->getChild("Ticket Information")
->setIcon("icon-info");
}
});

add_hook('ClientAreaHomepagePanels', 1, function(MenuItem $homePagePanels)
{
if (!is_null($homePagePanels->getChild('Active Products/Services'))) {
$homePagePanels->getChild("Active Products/Services")
->setIcon("icon-layers");
}
});

[brian!]

21 hours ago, Romain Faure said:

I have an error telling me that only FontAwesome works on WHMCS, can you help me change the editor?

it's FontAwesome and/or Glyphicons, and they need to be one or the other.

I suppose you could get around the check by using a fontawesome icon in the hook...

->setIcon("fa-layers");

and then modifying that value (the fa part) in the appropriate template - take a look in the /six/includes/ folder and view the code in navbar.tpl, sidebar.tpl etc to see how the icons are displayed and then adjust to how you need it to display your icons.

[Romain Faure]

Hi Brian,

I don't understand the connection with the hook modification, since it's not possible to edit the code manually:

<div menuItemName="{$item->getName()}" class="panel panel-default panel-accent-{$item->getExtra('color')}{if $item->getClass()} {$item->getClass()}{/if}"{if $item->
getAttribute('id')} id="{$item->
getAttribute('id')}"{/if}>
<div class="panel-heading">
	<h3 class="panel-title">
		{if $item->
		hasIcon()}
-->		<i class="{$item->getIcon()}"></i>       <-- (ex: <i class="icon-layers"></i> )
		 {/if}{$item->
		getLabel()}{if $item->
		hasBadge()} 
		<span class="badge">
		{$item->
		getBadge()}
		</span>
		{/if}
	</h3>
</div>

 

Results :

 

Thank you.

[brian!]

Hi,

21 hours ago, Romain Faure said:

I don't understand the connection with the hook modification,

think of the navbar, sidebar or panel as an array - the hook can modify that array; the template outputs that array.

21 hours ago, Romain Faure said:

since it's not possible to edit the code manually

oh there are ways to edit the code.

so let's say we have a homepage panel...

then we'll use a hook to modify the icon...

<?php

use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaHomepagePanels', 1, function(MenuItem $homePagePanels)
{
	if (!is_null($homePagePanels->getChild('Domains Expiring Soon'))) {
		$homePagePanels->getChild("Domains Expiring Soon")
			->setIcon("fa-brian");
	}
}); 

but that icon doesn't exist, therefore there's nothing to show...

...so next step is to modify the clientareahome.tpl template and change...

{if $item->hasIcon()}<i class="{$item->getIcon()}"></i>&nbsp;{/if}

to...

{if $item->hasIcon()}<i class="{$item->getIcon()|replace:'brian':'clock'}"></i> {/if}

.... and now we've changed the icon!

looking at your code, which I hadn't seen previously (I didn't know if you were using classes or images), you should be able to use the following in the hook...

->setIcon("fa-layers");

and then in the template...

<i class="{$item->getIcon()|replace:'fa-':'icon-'}"></i>