如何将文本与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属性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;
}