To position the text below the button, you can include the following CSS code to set it as display: block:
.my-text {
display: block;
font-family: "Courier-new";
}
To center your image, ensure to use text-align property in the container CSS:
.my-fancy-container {
border: 1px solid #ccc;
border-radius: 6px;
display: inline-block;
margin: 60px;
padding: 10px;
text-align: center;
}
To add an arrow, include a div element and apply the following CSS style:
<div class="arrow-down"></div>
CSS for the arrow:
.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 link: 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;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"/>
<div class="my-fancy-container">
<span class='icon icon-file-text my-icon'></span>
<span class="my-text">Hello World</span>
<div class="arrow-down"></div>
</div>