如何将文字对齐到fontawesome图标

Question

i searched through similar questions and still could not find a solution. I have a fontawesome icon that triggers an expanding form.

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

this is what i have with the code above

this is what i want to create

Answer 1

If you want the respective text to be vertically aligned center with the icon so you have to set a css property Vertical align : middle to your icon class.in your case

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

Jsfiddle

Answer 2

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