垂直对齐非常长的文本与FontAwesome

Question

我开始将FontAwesome用于设计网站。我找到一个棘手的问题，垂直对齐长文本与字体真棒。请参阅下面的屏幕截图。我也按照这里的教程：http://jsfiddle.net/audetwebdesign/9ATq8/并尝试使用i tag。但是，它不会解决我的问题。任何建议都会表示感谢，谢谢。

我目前的HTML代码：

<div class="rn_PhoneUs" id="yui_3_17_2_14_1450087355892_149">
        <a href="/app/answer/a_id/" id="yui_3_17_2_14_1450087355892_148"> You can call us Monday to Satursday From 9:00 to 18:00 </a>
    </div>

我也尝试过或使用span

<div class="rn_PhoneUs" id="yui_3_17_2_14_1450087355892_149">
<i class="fa fa-phone"> </i>        
<a href="/app/answer/a_id/" id="yui_3_17_2_14_1450087355892_148"> You can call us Monday to Satursday From 9:00 to 18:00 </a>
    </div>

Answer 1

你可以给i绝对位置。例如

div {
  width: 100px;
  padding-left: 20px;
  position: relative;
}

i {
  position: absolute;
  top: 0;
  left: 0;
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="rn_PhoneUs" id="yui_3_17_2_14_1450087355892_149">
  <i class="fa fa-phone"> </i>        
  <a href="/app/answer/a_id/" id="yui_3_17_2_14_1450087355892_148"> 
  You can call us Monday to Satursday From 9:00 to 18:00 </a>
</div>

或者，如果您希望fontAwesome图标垂直居中，可以使用

div {
  width: 100px;
  padding-left: 20px;
  position: relative;
}

i {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -8px;
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="rn_PhoneUs" id="yui_3_17_2_14_1450087355892_149">
  <i class="fa fa-phone"> </i>        
  <a href="/app/answer/a_id/" id="yui_3_17_2_14_1450087355892_148"> 
  You can call us Monday to Satursday From 9:00 to 18:00 </a>
</div>

Answer 2

使用伪来添加图标。

您需要为div添加填充以获取图标所需的空间。然后使用:before伪将图标添加到div。

将content: ""从样式表复制到伪https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css

＆＃13;

＆＃13;

.rn_PhoneUs {
  position: relative;
  padding-left: 30px;
  width: 160px;
}
.rn_PhoneUs:before {
  content: "\f095";
  font-family: FontAwesome;
  position: absolute;
  left: 5px;
}

＆＃13;

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<div class="rn_PhoneUs" id="yui_3_17_2_14_1450087355892_149">
  <a href="/app/answer/a_id/" id="yui_3_17_2_14_1450087355892_148"> You can call us Monday to Satursday From 9:00 to 18:00 </a>
</div>

＆＃13;

＆＃13;

＆＃13;