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

A nother possibility is to use the before and after selector

See this fiddle

As you can see in your css

 .my-fancy-container {
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 6px;
        margin: 60px;
        padding: 30px;
        position: relative;
    }
    
    .my-fancy-container::after {
        content: "\f0d7";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
    /*--adjust as necessary--*/
        color: #000;
        font-size: 18px;
        padding-right: 0.5em;
        position: absolute;
        bottom: 5px;
        left: 45%;
    }
    
    .my-text {
        font-family: "Courier-new";
    }
    
    .my-fancy-container::before {
        content: "\f15c";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
    /*--adjust as necessary--*/
        color: #000;
        font-size: 28px;
        padding-right: 0.5em;
        position: absolute;
        top: 5px;
        left: 40%;
    }
    
    .my-icon {
        vertical-align: middle;
        font-size: 40px;
    }

    Hello World

there are only a few changes :)

Of course you can place the image with the before selector as well.. so you have two images on the button and the text in the middle.