Did You Know?

Advanced visual search system powered by Ajax

Using Shortcodes

[direction]

Estimated reading: 1 minute 295 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 [direction]Theme Options > Header > Top of Header > Menu Element[/direction] 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.

https://i.imgur.com/7zac94t.gif

Leave a Comment

Purchase Banca
Demos
Banca Smart Finance Banca Finance Sass App Banca Small Bank Banca Loan Company Banca Simple Banca Banca Loan Steps Banca Mobile App
Unlimited Color Possibilities
Box Shadow
Real Life Examples

Click here to see what some of our customers created with Banca!