Добавление значка стрелки сортировки в таблицу Bootstrap 4

Question

Я пытаюсь добавить эти шрифты, классные значки сортировки в таблицу, и она не выравнивается правильно. Я также попытался ml-auto, и он не выравнивается вправо.

То, что я хочу, выровняйте стрелки по правой стороне ячейки.

Любая помощь, которую вы можете предоставить, будет принята с благодарностью.

Live Code:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<div class="table-responsive shadow p-3 mb-5 bg-light rounded">
  <table id="grid" class="table table-hover sortable">
    <thead class="thead-dark">
      <tr>
        <th data-type="string">?</th>
        <th data-type="string"><i class="fas fa-sort text-right"></i>Socre:</th>
        <th data-type="number"><i class="fas fa-sort text-right"></i>Age:</th>
        <th data-type="number"><i class="fas fa-sort text-right"></i>Student:</th>
        <th class="wfixed" data-type="string">Status:</th>
      </tr>

    </thead>
  </table>
</div>

Answer 1

Можете ли вы переместить их в разметке? Если это так, просто переместите их на другую сторону текста.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<div class="table-responsive shadow p-3 mb-5 bg-light rounded">
  <table id="grid" class="table table-hover sortable">
    <thead class="thead-dark">
      <tr>
        <th data-type="string">?</th>
        <th data-type="string"></i>Score:<i class="fas fa-sort text-right"></th>
        <th data-type="number"></i>Age<i class="fas fa-sort text-right">:</th>
        <th data-type="number"></i>Student:<i class="fas fa-sort text-right"></th>
        <th class="wfixed" data-type="string">Status:</th>
      </tr>

    </thead>
  </table>
</div>