{"id":72,"date":"2022-06-06T19:45:34","date_gmt":"2022-06-06T19:45:34","guid":{"rendered":"http:\/\/localhost\/wordpress_vikingerdocs\/?p=72"},"modified":"2022-09-12T13:42:39","modified_gmt":"2022-09-12T13:42:39","slug":"menu-icons","status":"publish","type":"post","link":"https:\/\/odindesignthemes.com\/vikingerthemedocs\/menu-icons\/","title":{"rendered":"Menu Icons"},"content":{"rendered":"\n<p>We created more than&nbsp;<strong>20 icons<\/strong>&nbsp;for you to choose from and use with the menu items of the&nbsp;<strong>Side Menu<\/strong>&nbsp;menu location. You can assign any of this icons to any menu item by entering the icon name into the menu item&nbsp;<strong>CSS Classes<\/strong>&nbsp;property:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>newsfeed<\/li><li>members<\/li><li>group<\/li><li>badges<\/li><li>quests<\/li><li>ranks<\/li><li>credits<\/li><li>profile<\/li><li>timeline<\/li><li>friend<\/li><li>blog-posts<\/li><li>photos<\/li><li>videos<\/li><li>streams<\/li><li>forums<\/li><li>overview<\/li><li>marketplace<\/li><li>events<\/li><li>notification<\/li><li>shopping-bag<\/li><li>settings<\/li><li>comment<\/li><li>messages<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-add-icons\">How can I add new SVG icons?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">To add new icons you need to create<\/h3>\n\n\n\n<p><strong>1)<\/strong> A new script file that includes the SVG code and include it in your theme <strong>functions.php<\/strong> (<strong>we recommend using the child theme<\/strong> as to not lose changes after a theme update).<br><br>You can use the theme script as an example, you will find it in the <strong>vikinger\/js\/source\/icon\/svg-loader.js<\/strong> file. You can copy it and replace the <strong>svgData <\/strong>constant value with the SVG icons you want to include.<br><br>Your SVG icons need to follow the same naming structure as existing ones, i.e:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!-- SVG CUSTOM --&gt;\n&lt;svg style=\"display: none;\"&gt;\n  &lt;symbol id=\"svg-custom\" viewBox=\"0 0 yourviewboxvalue yourviewboxvalue\" preserveAspectRatio=\"xMinYMin meet\"&gt;\n    \/\/ your svg content\n  &lt;\/symbol&gt;\n&lt;\/svg&gt;\n&lt;!-- \/SVG CUSTOM --&gt;    <\/pre>\n\n\n\n<p><strong>2)<\/strong> Create styles for your icons and add them to the <strong>style.css<\/strong> or add a new stylesheet and include it in the <strong>functions.php<\/strong> file, they must also follow the naming structure:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.icon-custom {\n  \/\/ your icon styles\n}    <\/pre>\n\n\n\n<p><strong>3)<\/strong> You can then use the part after the <strong>icon-*<\/strong> name to use that icon in the theme. In this case, you can use <strong>custom<\/strong> to assign this icon to a menu item.<br><br>The <strong>vikinger\/style.css<\/strong> file contains all theme styles that are not related to third-party plugins, you will find the <strong>.icon-*<\/strong> CSS declarations in that file.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We created more than&nbsp;20 icons&nbsp;for you to choose from and use with the menu items of the&nbsp;Side Menu&nbsp;menu location. You can assign any of this icons to any menu item by entering the icon name into the menu item&nbsp;CSS Classes&nbsp;property: newsfeed members group badges quests ranks credits profile timeline friend blog-posts photos videos streams forums [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,19],"tags":[],"class_list":["post-72","post","type-post","status-publish","format-standard","hentry","category-menu","category-vikinger"],"_links":{"self":[{"href":"https:\/\/odindesignthemes.com\/vikingerthemedocs\/wp-json\/wp\/v2\/posts\/72","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/odindesignthemes.com\/vikingerthemedocs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/odindesignthemes.com\/vikingerthemedocs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/odindesignthemes.com\/vikingerthemedocs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/odindesignthemes.com\/vikingerthemedocs\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":2,"href":"https:\/\/odindesignthemes.com\/vikingerthemedocs\/wp-json\/wp\/v2\/posts\/72\/revisions"}],"predecessor-version":[{"id":493,"href":"https:\/\/odindesignthemes.com\/vikingerthemedocs\/wp-json\/wp\/v2\/posts\/72\/revisions\/493"}],"wp:attachment":[{"href":"https:\/\/odindesignthemes.com\/vikingerthemedocs\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/odindesignthemes.com\/vikingerthemedocs\/wp-json\/wp\/v2\/categories?post=72"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/odindesignthemes.com\/vikingerthemedocs\/wp-json\/wp\/v2\/tags?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}