I am using angular-fontawesome and datatables and I want to create a button on 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 it won't load the icon component this way, but is there a way to do it without using fontawesome's css?
You should put it this way:
On the font awesome website you can choose the icon you want to display and the code will come to you below, you just have to replace it with FA-ICON-ICON. For example, for a button with a PDF icon it would be:
If you don't use AngularCLI, you can try this other way:
All the best
Do you use PHP? For example, this code is a button/icon and when clicked it shows a modal to modify data:
And this is to remove the record from the table
And here the modal to confirm if you want to delete the record
Cheers
1 hack, 1 failed attempt and 1 custom css
1. Hack
we capture the info of the icon and render it "barely"
app.component.ts
2. factory/injector not working =/
render button icon as component
app.components.js
button-download.component.ts
Add to the module the import, declarations and entrycomponents
app.module.ts
in theory it should render the entire thing but it falls short:
3 Custom CSS
We define a CSS class that pretends to be fontawesome so we can put
<i class="fe fe-download"></i> Download
, in the button text.You can either put it directly in the app.component.css or inject a component with your css.
I give you the second option which is a variation of proposal 2
we get the svgPathData, width and height from
and we put together an svg in the css of the component
button-download.component.css
We update the component template
button-download-component.ts
The advantage of the latter is that you can dispense with the fontawesome in the component (and if you clean the app globally too). It's basically doing the "Tree shaking" of the final bundle by hand.
Note If anyone can figure out why method 2 doesn't work (or if it's a bug), I'd be very interested in how to fix it. I get the impression that it is implicit in this question, that's why I don't open another one.
You could load the font(s) of font-awesome in your css and insert the character "by hand" (which is basically what FA css does, load the font and insert the characters with :before), but it would be inefficient because you would load many icons that you are not going to use. If you are only going to use a few, you may be more interested in entering them as svg vectors so you can change them to the color and size you need. Here is a list of awesome icons in svg and png format
https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black