CSS arrows with the help of Font-Awesome or GlyphiconsWednesday, March 11th, 2015

Articles, CSS

Already using font-awesome library or the bootstrap framework and in need of some arrows for flow charts? Check out the code below:

.arrow_right, .arrow_left, .arrow_right_left{border-width:1px 0 0 0; width:100px; height:1px;}
.arrow_top, .arrow_bottom, .arrow_top_bottom{border-width:0 0 0 1px; width:1px; height:100px; }
.arrow_right, .arrow_left, .arrow_right_left, .arrow_top, .arrow_bottom, .arrow_top_bottom{border-color: #c00; border-style:solid; position:relative; z-index:10;}

Assuming you are using font-awesome and already have it included in your css

.arrow_right:before, .arrow_left:before, .arrow_right_left:before, .arrow_right_left:after, .arrow_top:before, .arrow_bottom:before, .arrow_top_bottom:after, .arrow_top_bottom:before{color:#000; font-family: "FontAwesome"; font-size: 16px; position: absolute;}
.arrow_right:before, .arrow_right_left:before{content:"\f0da"; top: -11px; right: -2px;}
.arrow_left:before, .arrow_right_left:after{content:"\f0d9"; top: -11px; left: -2px;}
.arrow_top:before, .arrow_top_bottom:after{content:"\f0d8"; top: -9px; left: -5px;}
.arrow_bottom:before, .arrow_top_bottom:before{content:"\f0d7"; bottom: -9px; left: -5px;}

OR for bootstrap users include the following:

.arrow_right:before, .arrow_left:before, .arrow_right_left:before, .arrow_right_left:after, .arrow_top:before, .arrow_bottom:before, .arrow_top_bottom:after, .arrow_top_bottom:before{color:#c00; font-family: "Glyphicons Halflings"; font-size: 16px; position: absolute;}
.arrow_right:before, .arrow_right_left:before{content:"\e080"; top: -11px; right: -4px;}
.arrow_left:before, .arrow_right_left:after{content:"\e079"; top: -11px; left: -4px;}
.arrow_top:before, .arrow_top_bottom:after{content:"\e113"; top: -11px; left: -8px;}
.arrow_bottom:before, .arrow_top_bottom:before{content:"\e114"; bottom: -11px; left: -8px;}

The HTML markup

<h4>CSS arrow pointing right</h4>
<div class="arrow_right"></div>
<h4>CSS arrow pointing left</h4>
<div class="arrow_left"></div>
<h4>CSS arrow pointing left and right</h4>
<div class="arrow_right_left"></div>
<h4>CSS arrow pointing up</h4>
<div class="arrow_top"></div>
<h4>CSS arrow pointing down</h4>
<div class="arrow_bottom"></div>
<h4>CSS arrow pointing up and down</h4>
<div class="arrow_top_bottom"></div>

You can of course use any other css font library that contains a triangular shape and adjust the content types and positioning accordingly.

Known Issues:

  1. In IE the positioning is a bit hit and miss.
  2. When using Glyphicons and rotation, IE seems to make the border of 1px disappear at 45 degrees.

If you spot anything else, please put them in the comments below.

Useful links:

Like it? Share it!

Tagged with:


Amit is a digital consultant with a passion for design, interaction and usability. In his free time if he's not at the gym he's traveling the world.

View all posts by: WebMotionUK

Leave a Comment

You can use these HTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>