Menu Icons

We created more than 20 icons for you to choose from and use with the menu items of the Side Menu menu location. You can assign any of this icons to any menu item by entering the icon name into the menu item CSS Classes property:

newsfeed
members
group
badges
quests
ranks
credits
profile
timeline
friend
blog-posts
photos
videos
streams
forums
overview
marketplace
events
notification
shopping-bag
settings
comment
messages

How can I add new SVG icons?

To add new icons you need to create

1) A new script file that includes the SVG code and include it in your theme functions.php (we recommend using the child theme as to not lose changes after a theme update).

You can use the theme script as an example, you will find it in the vikinger/js/source/icon/svg-loader.js file. You can copy it and replace the svgData constant value with the SVG icons you want to include.

Your SVG icons need to follow the same naming structure as existing ones, i.e:

<!-- SVG CUSTOM -->
<svg style="display: none;">
  <symbol id="svg-custom" viewBox="0 0 yourviewboxvalue yourviewboxvalue" preserveAspectRatio="xMinYMin meet">
    // your svg content
  </symbol>
</svg>
<!-- /SVG CUSTOM -->

2) Create styles for your icons and add them to the style.css or add a new stylesheet and include it in the functions.php file, they must also follow the naming structure:

.icon-custom {
  // your icon styles
}

3) You can then use the part after the icon-* name to use that icon in the theme. In this case, you can use custom to assign this icon to a menu item.

The vikinger/style.css file contains all theme styles that are not related to third-party plugins, you will find the .icon-* CSS declarations in that file.