CODEWITHSUNDEEP
htmlicons
Sidd Mittal
Sidd Mittal

Reputation: 11

Put icon under text.

I was wondering what I needed to input, in order for the icon to be BELOW/UNDER the text. 

<a href="#"><div class="resume">
    <h4><i class="fa fa-address-card" style='display: block' ></i> Resume</h4>
</div> </a>

This code states that the icon is above.

Thanks in advance!

Upvotes: 0

Views: 1797

Answers (1)

zeleven
zeleven

Reputation: 456

p {
  <!-- set the paragraph position as absolute -->
       vertical-align: bottom;
       display: inline-block;  
       position: absolute;
        }
   
i {
    <!-- set the image position relatively -->  
      vertical-align: top;
      margin-top: 8%;
      margin-left: 0.7%;
      position: relative;
        }
<head>
       <!--let's assume u chose the fa-camera-retro icon-->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">  
    </head>

    <body>
        <div id="icon_labeled">`
           <p>Truc</p>
           <i class="fa fa-camera-retro"></i>        
        </div>
    </body>

answer from Center text above font awesome icon?

Upvotes: 1

Related Questions