Learn how to add arrows at the live demo page.
You can also learn more here: Bootstrap Arrows source page
There are two ways to add arrows to your page:
Below is how you would add arrows. This can be done through the HTML or standard content blocks. You could also hard-code this into your themes.
Let's say you want to display a green "success" arrow that points straight to the right. To do this, use the following:
<span class="arrow-success" rel="90"></span>
To rotate an arrow, enter a value (between 0 and 359) for rel.
For example, if you want to rotate the arrow so that it points straight down, you would assign a value of 180, like so:
<span class="arrow-warning" rel="180"></span>
There are two sizes of each type of arrow: small and large. By default, all arrows are small. However, you can make them larger if you want.
Below is an example of a large "inverse" arrow, set to point to the left.
<span class="arrow-inverse-large" rel="270"></span>
Pretty self-explanitory. You can add this anywhere you want on your page, and optionally link the arrow to any page within your site!