Question: i am starting to using FontAwesome for design website. i find out a[![enter image description here](https://i.stack.imgur.com/g3FiN.png)](https://i.stack.imgur.com/g3FiN.png) tricky problem to Vertical align long text with font awesome. Please see the below screenshot. I also follow the tutorial in here:`http://jsfiddle.net/audetwebdesign/9ATq8/` and try with i tag. However, it won't solve my problem. Any advice will appreciate, thank you.

My current HTML code: 

```
<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>

```

I also tried or with 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: 
You can give `i` absolute position. Eg.

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

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

```html
<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>
```

Or if you want your fontAwesome icon to be vertically centered you can use

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

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

```html
<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>
```
Use a pseudo to add the icon.

You need to add padding to the div for the space required by the icon. Then use the `:before` pseudo to add the icon to the div.

Copy the `content: ""` from the stylesheet to the pseudo <https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css>

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

```html
<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>
```