如何设置数据标签的样式并添加图标？

Question

我想在我的网站的移动版本上添加一个超棒的字体图标。移动版本上显示的是数据标签。我在台式机版本上使用了跨度，但移动设备无法正常工作。

HTML：      <table class="compliance-table safety"> <thead> <tr> <th scope="col">Name</th> </tr> </thead> <!-- This should be the repeating row for Classes --> <tbody class="safety-licences-target"> <tr> <td data-label="Name"><span data--merge="Class__c"></span></td> </tr> </tbody> </table>

CSS：

.safety-licences-target td:nth-child(3)::before
  {
    font-family: 'FontAwesome';
    color: #800000;
    text-decoration:none !important;
    font-size: 14px;
    content: "\f05a";
  }

这会弹出图标，但会带走文本。如果我更改它，文字将转到新罗马时代。我想将数据标签“名称”保留在“ Gotham SSm A”，“ Gotham SSm B”，Arial，san-serif中，并使用上述样式预先显示图标。

如果可能？