ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Cardinal
• August 1, 2014 at 10:03 pm #96973
  icecast

  Member

  Post count: 182

  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>

  August 1, 2014 at 10:09 pm #96974
  icecast

  Member

  Post count: 182

  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>

  August 3, 2014 at 2:25 am #97111
  Swift Ideas – Ed

  Keymaster

  Post count: 15264

  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

  August 4, 2014 at 10:53 am #97370
  icecast

  Member

  Post count: 182

  This reply has been marked as private.
  August 5, 2014 at 3:02 pm #98021
  Kyle – SUPPORT

  Moderator

  Post count: 35880

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

  – Kyle

  August 5, 2014 at 4:20 pm #98081
  Swift Ideas – Ed

  Keymaster

  Post count: 15264

  Hi there,

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

  You could try adding is as a background image.

  – Ed

  August 5, 2014 at 5:20 pm #98104
  icecast

  Member

  Post count: 182

  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…

  August 5, 2014 at 6:14 pm #98129
  Swift Ideas – Ed

  Keymaster

  Post count: 15264

  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

  August 5, 2014 at 6:20 pm #98132
  icecast

  Member

  Post count: 182

  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;
  }

  August 5, 2014 at 9:06 pm #98146
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  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

  August 5, 2014 at 9:24 pm #98149
  icecast

  Member

  Post count: 182

  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);

  August 6, 2014 at 2:38 am #98184
  Swift Ideas – Ed

  Keymaster

  Post count: 15264

  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

  August 6, 2014 at 6:26 am #98224
  icecast

  Member

  Post count: 182

  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;;
  }

  August 6, 2014 at 6:32 am #98227
  icecast

  Member

  Post count: 182

  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>

  August 6, 2014 at 6:01 pm #98562
  Swift Ideas – Ed

  Keymaster

  Post count: 15264

  @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

• Back to forum

  Posted in: Cardinal