Как поместить значок Fontawesome на кнопку DataTable? - Угловые

Я использую угловые-fontawesome и datatables, и я хочу создать кнопку в таблице, но вместо текста я хочу поместить значок, используя fontawesome. У меня есть следующий код:

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

Я знаю, что я не буду загружать компонент значка таким образом, но есть ли способ сделать это без использования fontovesome css?

Ответы

Ответ 1

Я думаю, что единственный вариант - использовать html. API говорит, что вы можете использовать html в text свойстве кнопки config. Например, вы можете использовать что-то вроде этого: <i class="fas fa-download"></i>

Ответ 2

До тех пор, пока вы загружаете шрифт, вы можете просто манипулировать свойством className. Я порекомендую вам сбросить настройки макета кнопки по умолчанию с помощью свойства dom. Как следует из других соображений, не смешивайте угловые (+2) директивы с этой частью кода. Вероятно, это не сработает (я нахожусь в угловом1, но это одно и то же дело) и действительно не обязательно. Вот пример:

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/

У меня нет рабочего plunkr, использующего DT и Angular2 под рукой, но вы можете получить пример Angular1, если хотите. Для всех это та же самая сделка, нет никакой разницы.

Ответ 3

Если вы хотите использовать угловой компонент вместо необработанного html, тогда вам нужно предварительно обработать угловой компонент где-нибудь в скрытом контейнере (т. fa-icon Создать компонент fa-icon динамически с использованием фабрики компонентов), а затем вручную скопировать визуализированную html в конфигурацию кнопок. Это гораздо более сложный процесс с небольшими преимуществами.

  • новые угловые элементы, вероятно, сделают несколько более простыми.

Ответ 4

То, что вы можете сделать как простое решение, - это добавить все ваши значки необходимости в скрытый div и дать каждому из них id чтобы их элемент svg был отображен, и вы можете назначить значок соответствующему текстовому элементу.

enter image description here

<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()
}]

Кроме того, вы можете удалить этот temp dev и значки после рендеринга вашей таблицы для очистки вашего HTML

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