如何在DataTable按钮上放置一个Fontawesome图标？ - Angular

Question

我正在使用angular-fontawesome和datatables，我想在表格中创建一个按钮，但我想使用fontawesome放置一个图标而不是文字。我有以下代码：

this.dtOptions = {
    //...
    buttons: [
        //...
        {
            extend: 'pdf',
            text: '<fa-icon [icon]="faDownload"></fa-icon>'
        }
    ]           
};

我知道我不会以这种方式加载图标的组件，但是有没有办法在不使用fontawesome css的情况下执行此操作？

Answer 1

我认为唯一的选择是使用html。 API表示您可以在按钮配置的text属性中使用html。例如，您可以使用以下内容： <i class="fas fa-download"></i>

Answer 2

只要您加载了fontawesome，就可以操纵className属性。我建议您通过dom属性重置默认按钮布局设置。正如其他人指出的那样，不要将angular（+2）指令与代码的那一部分混合。它可能不会起作用（我进入angular1，但是同样的交易）并且反正真的没有必要。这是一个例子：

buttons: {
  //reset class and change the rendered tag 
  //from <button> to <i>
  dom: {
    button: {
      tag: 'i',
      className: ''
    }
  },
  //since we now have completely unstyled icons add
  //some space between them trough a .custom-btn class
  buttons: [
   {
     titleAttr: 'Download as PDF',
     extend: 'pdfHtml5',
     className: 'custom-btn fa fa-file-pdf-o',
     text: ''
   },
   {
     titleAttr: 'Download as Excel',     
     extend: 'excelHtml5',
     className: 'custom-btn fa fa-file-excel-o',
     text: ''
   },
   {
     titleAttr: 'Download as CSV',     
     extend: 'csvHtml5',
     className: 'custom-btn fa fa-file-text-o',
     text: ''
   },
   {
     titleAttr: 'Print',     
     extend: 'print',
     className: 'custom-btn fa fa-print',
     text: ''
   }
 ]
}    

.custom-btn {
  cursor: pointer;
  margin-right: 5px;
}

<强> https://jsfiddle.net/r47ao4h3/

我手边没有使用DT和Angular2的插件，但如果你愿意，可以生成一个Angular1示例。对于所有这是同样的交易，没有区别。

Answer 3

如果你想使用角度组件而不是原始html，那么你必须在隐藏容器中的某处预先渲染角度组件（即使用组件工厂动态创建fa-icon组件），然后手动复制渲染的html按钮配置。这是一个复杂得多的过程，几乎没有什么好处。

• 新的角度元素可能会稍微简单一些。

Answer 4

作为一个简单的解决方案，您可以做的是在隐藏的div中添加所有需要的图标，并为每个图标添加id，以便呈现他们的svg元素，您可以为相关按钮文本指定一个图标。

<div id="icons" style="visibility: hidden;">
  <fa-icon id="faCoffee" [icon]="faCoffee"></fa-icon>
  <fa-icon id="faPrint" [icon]="faPrint"></fa-icon>
  <fa-icon id="faDownload" [icon]="faDownload"></fa-icon>
  <fa-icon id="faUser" [icon]="faUser"></fa-icon>
</div>

将按钮文本分配给呈现HTML的图标

buttons: [{
  text: $("#faCoffee").html()
}, {
  text: $("#faPrint").html()
}, {
  text: $("#faUser").html()
}, {
  text: $("#faDownload").html()
}]

此外，您可以在呈现表格后删除此临时开发和图标以清理HTML

$('#example').on('init.dt', function () {
  $("#icons").remove();
});