Font awesome icon button with label below

Question

I need to create a button with a font awesome icon and a text below that icon for a navigation menu. The result should look like i.e. the icons in the MS ribbon:

Answer 1

To place the text bellow the button, add display: block:

.my-text {
  display: block;
  font-family: "Courier-new";
}

To center your image, add a text-align:

.my-fancy-container {
  border: 1px solid #ccc;
  border-radius: 6px;
  display: inline-block;
  margin: 60px;
  padding: 10px;
  text-align: center;
}

For the arrow, add a div and this css :

CSS:

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    margin: 0 auto;
}

JSfiddle: http://jsfiddle.net/ghorg12110/3GMjp/418/

SNIPPET :

.my-fancy-container {
  border: 1px solid #ccc;
  border-radius: 6px;
  display: inline-block;
  margin: 60px;
  padding: 10px;
  text-align: center;
}

.my-text {
  display: block;
  font-family: "Courier-new";
}

.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid black;
    margin: 0 auto;
}

    
    Hello World