如何將文本與fontawesome圖標對齊

Question

我通過類似的問題進行搜索，仍然找不到解決方案。我有一個觸發擴展表單的fontawesome圖標。

 <div class='create-inventory-form'></div> 
       <div class='icon fa fa-pencil' id='form-container'> 
      <!-- <span>Create</span> I tried this but it only shows on the pop-up form--> 
       <span class='icon fa fa-close' id='form-close'></span> 
       <div id='form-content'> 
        <div id='form-head'> 
        <h1 class='pre'>Add New Item to Inventory</h1> 
        <p class='pre'>Good choice...</p> 
        <h1 class='post'>Thanks!</h1> 
        <p class='post'>I'll be in touch ASAP</p> 
        </div> 
        <form> 
        <input class='input name' name='user_name' placeholder='Your name please' type='text'> 
        <input class='input email' name='user_email' placeholder='A contact email' type='text'> 
        <select class='input select' name='subject'> 
         <option disabled=''>What shall we talk about?</option> 
         <option selected=''>About a new project</option> 
         <option>About a job opportunity</option> 
         <option>Let's do this over a coffee</option> 
        </select> 
        <textarea class='input message' placeholder='How can I help?'></textarea> 
        <input class='input submit' type='submit' value='Send Message'> 
        </form> 
       </div> 
       </div> 

這就是我上面

這個代碼是什麼我想創建

Answer 1

如果你想在各自的文本垂直對齊中心，所以你必須設置一個CSS屬性的圖標垂直對齊：中間到你的圖標類。在你的情況下

.fa-pencil:before { 
    content: "\f040"; 
    vertical-align: middle; 
} 

Jsfiddle

Answer 2

.fa{ 
display:block; 
text-align:center; 
}