Adding sort arrows icon to a table Bootstrap 4

Question

I'm trying to add these font awesome sort icons to a table and it's not aligning right. I also tried ml-auto and it's not aligning to the right properly.

What I want is, align that arrows to the right side of the cell.

Any help you can provide would be greatly appreciated.

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

Can you move them in the markup? If so just move them to the other side of the text.

<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>