How to put a Fontawesome icon on a DataTable button?
I'm using angular-fontawesome and datatables and I want to create a button in the table, but instead of text I want to place an icon using fontawesome. I have the following code:
this.dtOptions = {
//...
buttons: [
//...
{
extend: 'pdf',
text: '<fa-icon [icon]="faDownload"></fa-icon>'
}
]
};
I know that I will not load the component of the icon in this way, but is there a way to do it without having to use the fontawesome css?
I think the only option is to use html. API says that you can use html in text property of button config. For example you can use something like this: <i class="fas fa-download"></i>
As long as you have fontawesome loaded you can just manipulate the className property. I will recommend you to reset the default button layout setup through the dom property as well. As other points out, do not mix angular (+2) directives with that part of the code. It will probably not work (I am into angular1, but its the same deal) and really not necessary anyway. Here is an example :
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/
I do not have a working plunkr using DT and Angular2 at hand, but can produce an Angular1 example if you want. For all it is the same deal, there is no difference.
If you want to use angular component instead of raw html, then you will have to pre-render angular component somewhere in a hidden container (ie create fa-icon component dynamically using component factory) and then manually copy rendered html to button configuration. This is far more complicated process with little benefits.
上一篇: 建立促销：你如何管理依赖关系？