The bootstrap icon does not align with the text

This answer quotes ChatGPT

You can fix this by adjusting the CSS style. Specifically, you can adjust the vertical alignment of the text to align it with the icon. This can be done by setting the line-height property. Here is a simple example:

<div class="panel panel-default">
  <div class="panel-heading">
    class="glyphicon glyphicon-th-list" aria-hidden="true">
    class="panel-title" style="line-height: 20px; vertical-align: middle;">信息记录
  div>
div>

In this example, we set a line height for the header text so that it is vertically centered. You can adjust the vertical alignment by adjusting the value of the row height. In addition, we set a vertical alignment property to ensure that the ICONS and text are aligned vertically.

Change the span of the icon to nested elements, and set the vertical align center, pro test is possible, as follows:

<div class="panel panel-default">
    <div class="panel-heading">
        <span aria-hidden="true" style="vertical-align: middle;">
            <span class="glyphicon glyphicon-th-list">span>
        span>
        信息记录
    div>
div>

The result is shown below: