把图标放在文本下。
问题描述:
我想知道我需要输入什么,才能使图标在文本下方/下方。把图标放在文本下。
<a href="#"><div class="resume">
<h4><i class="fa fa-address-card" style='display: block' ></i> Resume</h4>
</div> </a>
此代码指出图标位于上方。
在此先感谢!
答
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>