テキストをフォントワームのアイコンに合わせるには

Question

私は同様の質問で検索しても解決策を見つけることができませんでした。私は拡大する形を引き起こすフォントのようなアイコンを持っています。

 <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; 
}