html - 如何以正确的方式将很棒的文本和字体排成一行？

Question

我只是想在一行中显示字体很棒的图标和文本:

<th>
 <span>
  <a>
   <i style="color:green;font-size:22px;" class="fa fa-plus-circle" aria-hidden="true"></i>
  </a>
 </span>
 <span> Add Task</span>
</th>

它正在工作，但问题是 =>

如果你看一下上面的图片，你会发现文字不在图标的中间。我试图在那里放置一些余量，但它不起作用。谁能帮帮我？

Answer 1

定位包含超赞字体图标的元素。将位置设置为相对位置并调整顶部值；

a {
  text-decoration: none;
  font-family: Arial;
  color: #333;
}


/*Example 1*/

i {
  color: green;
  vertical-align: sub;
  font-size: 50px;
}

i::before {
  font-size: 30px;
}


/*Example 2*/

span {
  color: green;
  font-size: 50px;
  position: relative;
  top: 4px;
}

span::before {
  font-size: 30px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<!--Example 1-->

<a href="#">
  <i class="fa fa-plus-circle" aria-hidden="true"></i> Add Task
</a>

<br>

<!--Example 2-->

<a href="#">
  <span class="fa fa-plus-circle" aria-hidden="true"></span> Add Project
</a>

示例代码笔:https://codepen.io/Omi236/pen/KqbQoO?editors=1100