嗨,我在尝试将文字对齐在一个字体真棒图标旁边时遇到了麻烦我已经尝试了一些东西但是它们似乎没有工作我正在尝试做的是制作一个带有一个按钮的面板,你可以单击并使用面板另一侧的fontawesome图标和文本调用该数字(我正在使用bootstrap v3.3.2来构建它)
这是一张我正在尝试做的图片
http://i.imgur.com/0yCsdyG.jpg
这里是目前的样子
http://i.imgur.com/UpMj6eJ.jpg
<div class="panel panel-default">
<div class="panel-body">
<div class="col-lg-8">
<i class="fa fa-phone fa-2x" style="align: middle;"></i>
<h3>Call us</h3>
</div>
<div class="col-lg-4 text-center">
<div class="btn-group btn-group-justified" style="align: middle;" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" <a href="tel:">Click the button to call us</a>
</button>
</div>
</div>
</div>
</div>
</div>
解决方法
要对字体 – 真棒图标的位置,外观和大小进行完全/独立控制,请尝试以下操作.
>使用相对于h3样式的属性值添加位置以控制重叠.
>使用：在选择器内容之后插入图标
>将属性值为absolute的位置添加到h3：CSS代码块之后
>使用left,right,top或bottom属性值实现所需位置.
h3 {
position: relative; /* Helps us control overlap */
padding-left: 25px; /* Creates space for the Phone Icon */
}
h3:after {
content: '\f095';
font-family: fontAwesome;
position: absolute;
left: 0; /* Adjust as needed */
top: 3px; /* Adjust as needed */
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <h3>Call us</h3>
注意：您可以使用CSS font-size属性值调整图标的大小.
