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

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的工作plunkr,但如果你愿意,可以产生一个Angular1示例.对于所有这一切都是同样的交易,没有区别.