{"id":87,"date":"2021-03-17T10:56:22","date_gmt":"2021-03-17T10:56:22","guid":{"rendered":"https:\/\/helpdesk.spider-themes.net\/docs\/docy-wordpress-theme\/using-shortcodes\/direction\/"},"modified":"2021-03-17T10:56:22","modified_gmt":"2021-03-17T10:56:22","slug":"direction","status":"publish","type":"docs","link":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/docs\/docy-wordpress-theme\/using-shortcodes\/direction\/","title":{"rendered":"[direction] Shortcodes for Documentation"},"content":{"rendered":"\n<p>You may see some direction or steps highlighted on the theme doc demo pages like the one below.<\/p>\n\n\n\n<p>We used the <code>[[direction]<\/code> shortcode to render the design of the steps. Your shortcode could be <code>[direction]]a&gt;b&gt;c[\/direction]]<\/code>. The &#8220;&gt;&#8221; character will automatically be converted into a direction separator icon. By default, this character (&gt;) will be replaced with a right-arrow icon.<\/p>\n\n\n\n<p>You can change the icon with some custom CSS. See the code below-<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.direction_step + .direction_step:before {\n  content: \"\\35\";\n  font-family: eleganticons;\n}<\/code><\/pre>\n\n\n\n<p>In this case, the content value represents the Elegant Icon code. Please note that you will not find the icon code directly on the Elegant Icon website. <\/p>\n\n\n\n<p>To obtain the code, inspect the icon by right-clicking on it from their website and navigating to the CSS <code>::before<\/code> CSS Pseudo-elements to locate the icon code. Check out the GIF below to see the process of inspecting and obtaining the icon code.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-imgur wp-block-embed-imgur\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"imgur-embed-pub\" lang=\"en\" data-id=\"7zac94t\"><a href=\"https:\/\/imgur.com\/7zac94t\">View post on imgur.com<\/a><\/blockquote><script async src=\"\/\/s.imgur.com\/min\/embed.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>You can customize direction steps in your theme using the [direction] shortcode. Replace the default arrow icon by editing CSS with the desired Elegant Icon code, which you obtain by inspecting the website\u2019s icons.<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":86,"menu_order":22,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-87","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/docs\/87","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/comments?post=87"}],"version-history":[{"count":0,"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/docs\/87\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/docs\/86"}],"wp:attachment":[{"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/media?parent=87"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/doc_tag?post=87"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}