把图标放在文本下面。

时间:2017-08-19 01:40:09

标签: html icons

我想知道我需要输入什么,以便图标低于/低于文本。

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

此代码表明图标在上方。

提前致谢!

1 个答案:

答案 0 :(得分:1)

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>

来自Center text above font awesome icon?

的回答