Using Shortcodes [direction] Estimated reading: 1 minute 894 views You may see some directions or steps highlighted on the theme doc demo pages like the below screenshot. We used the [direction] shortcode to render the design of the steps. Your shortcode could be Theme Options Header Top of Header Menu Element Use the > character as the direction separator icon. This character (>) will be replaced with an arrow-right icon by default. You can change the icon with some custom CSS. See the code below- .direction_step + .direction_step:before { content: "\35"; font-family: eleganticons; } Here the content value is the Elegant Icon code. You would not find the icon code directly on the Elegant Icon’s website. Inspect the icon by right-clicking on it from their website. Then navigate to the CSS ::before CSS Pseudo-elements to see the icon code. Watch the below GIF to see the process of inspection and taking of the icon code. View post on imgur.com
