Estimated reading: 1 minute 1512 views

You may see some direction or steps highlighted on the theme doc demo pages as 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.


Lascia un commento

Share this Doc


Or copy link