水平对齐表头文本和图标

Question

我有一张桌子，但图标没有与文字水平对齐。当表头文本很长时，图标会显示在文本下面，如下所示：

这是表头的html：

<thead class="thead-default">
        <tr><th>&nbsp;</th>
            <th>id
              <a href="/web/app_dev.php/candidates?sort=desc&amp;cat=id"><i class="fa fa-chevron-down"></i></a>
            </th>
            <th>benaderd
              <a href="/web/app_dev.php/candidates?sort=desc&amp;cat=approached"><i class="fa fa-chevron-down"></i></a>
            </th>
            <th>naam
               <a href="/web/app_dev.php/candidates?sort=desc&amp;cat=name"><i class="fa fa-chevron-down"></i></a>
            </th>
            <th>skills
              <a href="/web/app_dev.php/candidates?sort=desc&amp;cat=skills"><i class="fa fa-chevron-down"></i></a>
            </th>
            <th>email
              <a href="/web/app_dev.php/candidates?sort=desc&amp;cat=email"><i class="fa fa-chevron-down"></i></a>
            </th>
            <th>telefoon
              <a href="/web/app_dev.php/candidates?sort=desc&amp;cat=mobile"><i class="fa fa-chevron-down"></i></a>
            </th>
            <th>stad
              <a href="/web/app_dev.php/candidates?sort=desc&amp;cat=city"><i class="fa fa-chevron-down"></i></a>
            </th>
        </tr>
</thead>

这是scss代码：

.table {
    .thead-default {
        th {
            //&:nth-of-type(3){
            //    display: inline-flex;
            //}
            font-size: 14px;
            font-weight: 500;
            color: #4a4a4a;
            text-transform: uppercase;

            @include media-breakpoint-up(md){
                //&:nth-of-type(2) {
                //    width: 80px;
                //}
                //
                //&:last-of-type {
                //    width: 95px;
                //}
            }
        }
    }

    td {
        vertical-align: middle;
    }

    .profile-pic {
        width: 50px;
        height: 50px;
        border-radius: 100%;

        .initial {
            height: 100%;
            color: #fff;
        }
    }

    a {
        &:hover {
            cursor: pointer;
        }

        .more_horiz {
            line-height: 36px;
        }
    }
}

如何将图标与表格标题文字对齐？如您所见，我首先尝试设置表头的宽度。