[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 [direction]]a>b>c[/direction]]. The “>” character will automatically be converted into a direction separator icon. By default, this character (>) will be replaced with a right-arrow icon.

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.