Forums - Thread Details
  • State Verified Answer
  • Replies 3 replies
  • Subscribers 133 subscribers
  • Views 74 views
  • Users 0 members are here
Related

How can i change images from shortcut menu with an icon font

Adrian Paun
over 4 years ago

Hi, I want to change the images in shortcut menu with material icon font from google like i did in the tab menu in this image:

BranchBird.png

I have found in the basic Sugar5 theme the code for it:

{foreach from=$SHORTCUT_MENU item=item}             {if $item.URL == "-"}                     {else}           {$item.IMAGE} {$item.LABEL}         {/if}         {/foreach}

But i dont know from where does it pull out that {$item.IMAGE}, can somebody tell me if that is possible ?

The font icons embeds like this: <i class="material-icons">&#xE5D3;</i>, for refferences: Material Icons Guide - Google Design

  • 0 over 4 years ago

    Hi Adrian,

    This is being pulled from the "SHORTCUT_MENU" object in include/MVC/View/SugarView.php. It is probably going to be easiest to make the change within the tpl file, however. You could just add an if-statement:

    {if $item.URL == "-"}

    <a></a><span> </span>

    {elseif $item.URL == "index.php?module=Calendar&action=index&view=day"}

    <a href="{$item.URL}"><i class="material-icons">&#xE5D3;</i> <span>{$item.LABEL}</span></a>

    {else}

    <a href="{$item.URL}">{$item.IMAGE} <span>{$item.LABEL}</span></a>

    {/if}

    Let me know if that helps!

    -Alan

  • 0 over 4 years ago in reply to Alan Beam

    I'll definitley try this method monday morning. Thanks for your help and i'll be back here with a reply to tell you if it worked or not.

  • 0 over 4 years ago in reply to Alan Beam

    This worked perfectly withouth any change in the MVC core folder, i've edited only the theme tpl as you sugested with this code:

    {foreach from=$SHORTCUT_MENU item=item}

        <span style="white-space:nowrap;">

            {if $item.URL == "-"}

              <a></a><span> </span>

                <!-- add font awesome to action url's instead of images -->

                <!-- calendar -->

                {elseif $item.URL == "index.php?module=Meetings&action=EditView&return_module=Meetings&return_action=DetailView"}

                <a href="{$item.URL}"><i class="material-icons">&#xE7FB;</i> <span>{$item.LABEL}</span></a>

                {elseif $item.URL == "index.php?module=Calls&action=EditView&return_module=Calls&return_action=DetailView"}

                <a href="{$item.URL}"><i class="material-icons">&#xE0B0;</i> <span>{$item.LABEL}</span></a>

                {elseif $item.URL == "index.php?module=Tasks&action=EditView&return_module=Tasks&return_action=DetailView"}

                <a href="{$item.URL}"><i class="material-icons">&#xE145;</i> <span>{$item.LABEL}</span></a>

                {elseif $item.URL == "index.php?module=Calendar&action=index&view=day"}

                <a href="{$item.URL}"><i class="material-icons">&#xE8DF;</i> <span>{$item.LABEL}</span></a>

               

            {else}

              <a href="{$item.URL}">{$item.IMAGE} <span>{$item.LABEL}</span></a>

            {/if}

        </span>

        {/foreach}

    And this is the result,

    BranchBird.png@

    Thank you verry much Alan.