[direction] Shortcodes for Documentation

Summary: 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’s icons.

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.

View post on imgur.com