如何使bootstrap-table列排序图标更明显？

<link rel="stylesheet" href="path/to/bootstrap-table.css">
<script src="path/to/bootstrap-table.js"></script>

<table id="myTable">
  <thead>
    <tr>
      <th data-field="name" data-sortable="true">Name</th>
      <th data-field="age" data-sortable="true">Age</th>
      <th data-field="country" data-sortable="true">Country</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格数据 -->
  </tbody>
</table>

$(function() {
  $('#myTable').bootstrapTable({
    icons: {
      sort: 'custom-sort-icon' // 自定义排序图标的样式类名
    }
  });
});

.custom-sort-icon::before {
  content: '\e151'; /* 使用合适的图标字体编码 */
  font-family: 'Glyphicons Halflings'; /* 使用合适的图标字体 */
  font-size: 10px; /* 调整图标大小 */
  margin-left: 5px; /* 调整图标与文本的间距 */
}