更改 jQuery DataTables 标题中的排序图标答案

【问题标题】：Changing sorting icons in jQuery DataTables header更改 jQuery DataTables 标题中的排序图标
【发布时间】：2020-10-02 12:51:44
【问题描述】：

我正在使用带有 bootstrap 4 样式的 DataTables 插件来绘制我的表格。下面是代码：

$(document).ready(function () {
		$('#my-table').DataTable({
			scrollY: '20vh',
			paging: false,
			dom: '<f>t',
      searching: false
		});
});

body {
  padding: 3%;
}

<!DOCTYPE html>

<html lang="en">

  <head>
    <!-- bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <!-- dataTable -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">

    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>

  <body>

    <table class="table table-striped  table-hover table-fit" id="my-table">
      <thead class='thead-dark'>
        <tr>
          <th>Header</th>
        </tr>
      </thead>
      <tbody>
         <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
      </tbody>

    </table>


    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
    <!-- Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <!-- dataTable -->
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
  </body>

我想将标题中的排序箭头更改为其他一些看起来更大的图标。像这样的：

我已经关注了很多答案： How to change Jquery datatable sort icon color

How to change the color of the sorting arrows in DataTables

https://datatables.net/forums/discussion/40100/replacing-original-sorting-icons-with-bootstrap-4

我已经在我的 css 文件中尝试过这个：

table.dataTable thead .sorting:before, 
table.dataTable thead .sorting_asc:before, 
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before, 
table.dataTable thead .sorting_desc_disabled:before {
  content: "\E253" !important;
}

但它们不会改变或图标会变形：

我该怎么做？或者我怎样才能让原来的图标变粗？

【问题讨论】：

使用与您类似的方法，here 是一个将默认图标替换为箭头的示例。除了那些箭头，也许你可以使用你的三角形（例如this 或类似的）。
添加解决方案@hydradon。

标签： javascript html jquery css datatables

【解决方案1】：

使用这个：

$(document).ready(function () {
		$('#my-table').DataTable({
			scrollY: '20vh',
			paging: false,
			dom: '<f>t',
      searching: false
		});
});

body {
  padding: 3%;
}

table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {
    right: 1em;
    content: "\02C6" !important;
}

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
    right: 0.5em;
    content: "\02C7" !important;
}

<!DOCTYPE html>

<html lang="en">

  <head>
    <!-- bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <!-- dataTable -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
  </head>

  <body>

    <table class="table table-striped  table-hover table-fit" id="my-table">
      <thead class='thead-dark'>
        <tr>
          <th>Header
            
          </th>
        </tr>
      </thead>
      <tbody>
         <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
         <tr>
          <td>Data</td>
        </tr>
      </tbody>

    </table>


    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
    <!-- Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <!-- dataTable -->
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
  </body>

【讨论】：