[direction] Shortcodes for Documentation

Summary: Highlight steps in your theme documentation using the [direction] shortcode. Customize the default arrow icon with CSS.

You may see some direction or steps highlighted on the theme doc demo pages like the one below.

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

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.

To obtain the code, inspect the icon by right-clicking on it from their website and navigating to the CSS ::before CSS Pseudo-elements to locate the icon code. Check out the GIF below to see the process of inspecting and obtaining the icon code.