adding images to nav menu

[AffordableDomainsCanada]

When using

 

->setIcon('fa-server')

 

can this be used with Glyphicons?

 

Also, with

fa-server

is there a way to remove the top 2 servers on the image output ?

[brian!]

can this be used with Glyphicons?

yes.

<?php

use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaPrimaryNavbar', 1, function(MenuItem $PrimaryNavbar)
{
   if(!is_null($PrimaryNavbar->getChild('Home'))){
               $PrimaryNavbar->getChild('Home')
               ->setIcon('glyphicon-home');
   }
});

 

Also, with

fa-server

is there a way to remove the top 2 servers on the image output ?

not with code - those I suppose you could edit an icon and resave it as something else... http://birchenough.co.uk/edit-font-awesome-icon-add-font-awesome-font/

 

two other things to contemplate...

 

1. there's little to stop you from adding a png image to a child label (in navbar or sidebar)...

 

<?php

use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaPrimaryNavbar', 1, function(MenuItem $PrimaryNavbar)
{
   if(!is_null($PrimaryNavbar->getChild('Home'))){
               $PrimaryNavbar->getChild('Home')
               ->setLabel('<img src="homeicon.png"> '.Lang::trans('clientareanavhome'));
   }
});

 

2. or if you want to be adventurous... (ab)using setIcon to load any specific png image instead of a fontawesome/glyphicon image...

 

<?php

use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaPrimaryNavbar', 1, function(MenuItem $PrimaryNavbar)
{
   if(!is_null($PrimaryNavbar->getChild('Store'))){
               $PrimaryNavbar->getChild('Store')
               ->setIcon('fa-shopicon');
   }
});

and then in navbar.tpl,

 

{if $item->hasIcon()}<img src="{$item->getIcon()|replace:'fa fa-':''}.png"> {/if}

... with a similar change to $childitem too - though I suspect you'd have to ensure the icons were all the same size. otherwise you may get layout issues.... the same should work for sidebars too (with the same size proviso).

 

[Businezz]

On 7/19/2017 at 11:39 AM, brian! said:

yes.

 

<?php

use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaPrimaryNavbar', 1, function(MenuItem $PrimaryNavbar)
{
   if(!is_null($PrimaryNavbar->getChild('Home'))){
               $PrimaryNavbar->getChild('Home')
               ->setIcon('glyphicon-home');
   }
});

 

 

 

 

 

 

not with code - those I suppose you could edit an icon and resave it as something else... http://birchenough.co.uk/edit-font-awesome-icon-add-font-awesome-font/

 

two other things to contemplate...

 

1. there's little to stop you from adding a png image to a child label (in navbar or sidebar)...

 

 

<?php

use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaPrimaryNavbar', 1, function(MenuItem $PrimaryNavbar)
{
   if(!is_null($PrimaryNavbar->getChild('Home'))){
               $PrimaryNavbar->getChild('Home')
               ->setLabel('<img src="homeicon.png"> '.Lang::trans('clientareanavhome'));
   }
});

 

 

 

 

 

 

2. or if you want to be adventurous... (ab)using setIcon to load any specific png image instead of a fontawesome/glyphicon image...

 

 

<?php

use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaPrimaryNavbar', 1, function(MenuItem $PrimaryNavbar)
{
   if(!is_null($PrimaryNavbar->getChild('Store'))){
               $PrimaryNavbar->getChild('Store')
               ->setIcon('fa-shopicon');
   }
});

 

 

and then in navbar.tpl,

 

 

{if $item->hasIcon()}<img src="{$item->getIcon()|replace:'fa fa-':''}.png"> {/if}

 

 

... with a similar change to $childitem too - though I suspect you'd have to ensure the icons were all the same size. otherwise you may get layout issues.... the same should work for sidebars too (with the same size proviso).

 

 

 

 

Hey,

How do i add custom image and name on the menu?

Example: Menu named Home and having image as well?

[brian!]

On 17/09/2021 at 05:07, Businezz said:

How do i add custom image and name on the menu?

the above hooks already do that. 🙂

[Businezz]

6 minutes ago, brian! said:

the above hooks already do that. 🙂

Hi, it doesn't work me. I do use Lagom template.... 

[brian!]

26 minutes ago, Businezz said:

Hi, it doesn't work me. I do use Lagom template.... 

important to have mentioned the Lagom use.... once you use custom themes, then the options will be different.

On 17/09/2021 at 05:07, Businezz said:

How do i add custom image and name on the menu?

i'll add a font awesome icon to the Store menu.....

<?php

use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaPrimaryNavbar', 1, function(MenuItem $PrimaryNavbar) {
	
	if (!is_null($PrimaryNavbar->getChild('Store'))) {
		$PrimaryNavbar->getChild('Store')->setLabel('<i class="fas fa-shopping-cart"></i> '.Lang::trans('navStore'));
	}
});

I would therefore assume you can use the <img> option instead of a FA icon in a setLabel - but no doubt you'll let me know if that doesn't work!

it might also be simpler to use absolute paths to any images to ensure you're calling them.

...and with regards to adding "Home" to the home navbar icon, it's already there - but it's hidden by default in the CSS, so that should be a quick CSS fix to show it.

[Businezz]

On 10/3/2021 at 2:07 PM, brian! said:

important to have mentioned the Lagom use.... once you use custom themes, then the options will be different.

i'll add a font awesome icon to the Store menu.....

<?php

use WHMCS\View\Menu\Item as MenuItem;

add_hook('ClientAreaPrimaryNavbar', 1, function(MenuItem $PrimaryNavbar) {
	
	if (!is_null($PrimaryNavbar->getChild('Store'))) {
		$PrimaryNavbar->getChild('Store')->setLabel('<i class="fas fa-shopping-cart"></i> '.Lang::trans('navStore'));
	}
});

I would therefore assume you can use the <img> option instead of a FA icon in a setLabel - but no doubt you'll let me know if that doesn't work!

it might also be simpler to use absolute paths to any images to ensure you're calling them.

...and with regards to adding "Home" to the home navbar icon, it's already there - but it's hidden by default in the CSS, so that should be a quick CSS fix to show it.

Hey, this hook replaced the label and not the icon.... I am using vertical menus BTW on the left if that helps 🙂

Also, how can i add different images for all the menus? Thanks!!!!