Navbar icons size

[christ2000]

hello, people, any idea how make navbar icons bigger? i mean the font awesome icons use on menus

thanks

[mobhar]

Assume in your Navbar, there are two menu items; each of it uses fa-home and fa-bell icons, then simply put this code in "Startup Script" under "Client Scripts" -> "Global" -> "Pages with header/footer":

$(document).ready(function(){
$("a > i.fa-home.fa").css({"font-size":"2rem"}); // adjust the icon class and font size to your needs
$("a > i.fa-bell.fa").css({"font-size":"2rem"}); // adjust the icon class and font size to your needs
});

[christ2000]

thanks, work perfect,i was using this:

.fa, .fas {

font-weight: 900;
font-size: larger;

}

[christ2000]

do you know if i can add bootstrap Badges to this navbar menu? or it is no possible

thanks

[mobhar]

Of course, you can. Simply use "MenuItem_Adding" server event, similar to "Example 2" from "Server Events and Client Scripts" -> "MenuItem_Adding" in PHPMaker Help menu.

[christ2000]

hello, i used the following code for test but item do not appear on top menu

function MenuItem_Adding(&$item) {
//var_dump($item);
if ($item->Text == "Download")
$item->Icon = "fa-download";
if ($item->Text == "Something")
$item->Label = "<small class=\"label float-right bg-green\">new</small>"; // Label shows on the right hand side of the menu item (for vertical menu only)
return TRUE;
$Item->Allowed = TRUE ;
}

thanks

[mobhar]

You need to put return TRUE outside your own code and before the closing } of that even; so try this:

function MenuItem_Adding(&$item) {
//var_dump($item);
if ($item->Text == "Download")
$item->Icon = "fa-download";
if ($item->Text == "Something")
$item->Label = "<small class=\"label float-right bg-green\">new</small>"; // Label shows on the right hand side of the menu item (for vertical menu only)

return TRUE;
}

[christ2000]

hello i use as you mention but item do not appear on to menu. my question is , dont need to put $Item->Allowed = TRUE ; ?

thanks

[mobhar]

No need to use Allowed property, since you only want to customize the menu caption/text, right?

It seems you just copy and paste from Example 2 of MenuItem_Adding server event from the Help file. Of course it won't work, because you need to adjust the example that suits to your needs.

[christ2000]

hello, i was using this code to show badge but dont work

function MenuItem_Adding(&$item) {
//var_dump($item);
if ($item->Text == "Download")
$item->ViewAttrs["class"] = "badge badge-danger";

return TRUE;
}

any idea on this

[mobhar]

christ2000 wrote:
$item->ViewAttrs["class"] = "badge badge-danger";

There are no ViewAttrs property that belongs to the menu item in that event, that's why it won't work.

[kirondedshem]

any idea how make navbar icons bigger? i mean the font awesome icons use on menus

This might be late but:
font awesome already supports icon sizes and i think overiding the ".fa, .fas" classes will also affect any font awesome icons you might use elsewhere on the site.

Anyway font awesome has class called "fa-Nx" where N is either 2,3,4,5 eg fa-2x, fa-3x etc etc, This means draw icon to N times its size
for example to draw dashboard icon you would normally paste "fa-dashboard"
BUT to draw it at 2 times its size you would put "fa-dashboard fa-2x"

Also if thier default zoom sizes dont work for you then using your previous answers, you can go to php->html->styles->user styles and define your own zoom like so

.fa-customx {
font-size: 2.5em;
}

then use that on the icons, but i advise not to overide the whole fa class just for that

[christ2000]

hello kirondedshem, work great too this solution, thanks