SVG Menu Icon

[icecast]

hi, any suggestions to add svg icon to menu item, instead of gizmo or font-awesome?

<svg class=”icon-bucket”><use xlink:href=”#icon-bucket”></use></svg>

[icecast]

or, any suggestions to add my own custom button to menu bar?

<svg class=”icon-bucket”><use xlink:href=”#icon-bucket”></use></svg><span id=”bucket” class=”text”>BUCKET</span>

[Swift Ideas – Ed]

You’d need to edit the template menu walker for this, /swift-framework/sf-megamenu/mega_menu_custom_walker.php (may be custom_walker.php in your version)

You could use the standard icon input, but modify the output to suit your needs.

– Ed

[icecast]

This reply has been marked as private.

[Kyle – SUPPORT]

I will assign this to Ed for you, he will get back to your later today/tomorrow

– Kyle

[Swift Ideas – Ed]

Hi there,

See here – http://css-tricks.com/using-svg/

You could try adding is as a background image.

– Ed

[icecast]

thanks, but i am not looking for an overview on svg icons, i already use them and make them.

i am looking for specific guidance on how to integrate with cardinal theme menu items…

[Swift Ideas – Ed]

Hi @icecast,

I know – I was pointing out the background image css that you can use to add them as a background image to the selector you pasted above.

– Ed

[icecast]

using that link’s example, where would i add a class to a specific cardinal theme menu item?

Kiwi Corp

.logo {
display: block;
text-indent: -9999px;
width: 100px;
height: 82px;
background: url(kiwi.svg);
background-size: 100px 82px;
}

[Rui Guerreiro – SUPPORT]

I guess what Ed suggested was to use the selector that you specified above

li.menu-item-620.menu-item.menu-item-type-custom.menu-item-object-custom.sf-std-menu.sf-mega-menu-fw.sf-menu-item-loggedin.sf-menu-item-btn {
display: block;
text-indent: -9999px;
width: 100px;
height: 82px;
background: url(kiwi.svg);
background-size: 100px 82px;
}

-Rui

[icecast]

thanks, i tried that but cannot figure out how to insert/replace

<svg class=”icon-bucket”><use xlink:href=”#icon-bucket”></use></svg>

into

background: url(kiwi.svg);

[Swift Ideas – Ed]

Hi @icecast,

That wouldn’t be possible, it would only be possible with a .svg file.

If you needed to add that code, you’d need to make core template changes to the custom menu walker.

– Ed

[icecast]

I also tried a traditional url below, but did not work

Instead of making changes to core files, why not add a line to /cardinal-child/functions.php?

If not, then where would i change /cardinal/swift-framework/sf-megamenu/custom_walker.php?

(the svg icon does not have to go above the menu text, it can go to the right like ss-gizmo or font-awesome)

Or, how about just adding a simple button below the vertical menu?

li.menu-item-620.menu-item.menu-item-type-custom.menu-item-object-custom.sf-std-menu.sf-mega-menu-fw.sf-menu-item-loggedin.sf-menu-item-btn {
display: block;
text-indent: -9999px;
width: 100px;
height: 82px;
background-size: 100px 82px;
background: ‘https://s3.amazonaws.com/zocalo.pro/global/heavy/bucketfm.svg&#8217;;
}

[icecast]

This is the svg button I would add below vertical menu that I know works anywhere within cardinal

<svg class=”icon-advertising-megaphone-2″><use xlink:href=”#icon-advertising-megaphone-2″></use></svg><span id=”zocalo” class=”text”>MENU BUTTON</span>

[Swift Ideas – Ed]

@icecast Without custom template changes, the best way I can think to add this would be to add it to the vertical header copyright area?

– Ed