3

Estoy utilizado angular-fontawesome y datatables y deseo crear un boton en la tabla, pero en vez de texto quiero colocar un icono utilizando fontawesome. poseo el siguiente codigo:

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

Yo se que no me cargara en componente del icono de esta manera, pero hay una forma de hacerlo sin tener que utilizar el css de fontawesome?

2

4 respuestas 4

4

Deberías ponerlo de esta forma:

            text: '<i class="fab FA-ICONO-ICONO"></i>',

En la web de font awesome puedes elegir el icono que quieres mostrar y abajo te vendrá el código, tan solo tienes que sustituirlo por FA-ICONO-ICONO. Por ejemplo , para un boton con icono de PDF seria:

buttons: [
        //...
        {
            extend: 'pdf',
            text: '<i class="far fa-file-pdf"></i>',
        }
    ]    

Si no utilizas AngularCLI, puedes probar esta otra forma:

<fa name="NOMBRE ICONO"></fa>

Un saludo

1
  • Bueno la primera forma es clara sino utilizara componentes, no se si miraste el link? y lo segundo, si utilizo angular cli. Commented el 4 may. 2018 a las 20:57
1
+100

1 hack, 1 intento que no funciona y 1 custom css

1. Hack

capturamos la info del icono y lo renderizamos "a pelo"

app.component.ts

import { faDownload } from '@fortawesome/free-solid-svg-icons';

...

export class AppComponent implements OnInit {
  title = 'app';
  faDownload = faDownload;
  dtOptions: any = {};

...

  elTexto = `<fa-icon class="ng-fa-icon">
  <svg
    aria-hidden="true" data-prefix="`+this.faDownload.prefix+`" data-icon="`+this.faDownload.iconName+`"
    class="svg-inline--fa fa-`+this.faDownload.iconName+`" role="img"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 `+this.faDownload.icon[0]+` `+this.faDownload.icon[1]+`">
    <path fill="currentColor" d="`+this.faDownload.icon[4]+`"></path></svg></fa-icon> Download
  `;

ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 20,
      dom: 'Bfrtip',
      // Configure the buttons
      buttons: [
        'print',
        'excel',
        {
          text: this.elTexto,
          key: '1',
          action: function (e, dt, node, config) {
            alert('Button activated');
          }
        }
      ]
    };

2. factory/injector no anda =/

renderizar el icono boton como componente

app.components.js

import {
  Component,
  OnInit,
  ComponentFactoryResolver,
  ComponentRef,
  Injector
} from '@angular/core';

import { ButtonDownloadComponent } from './buttons/button-download/button-download.component';

...

  constructor(
    private http: Http,
    private resolver: ComponentFactoryResolver,
    private injector: Injector
  ) { }
  factory = this.resolver.resolveComponentFactory(ButtonDownloadComponent);
  btnDownloadComponent = this.factory.create(this.injector);

  elTexto = this.btnDownloadComponent.location.nativeElement;

ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 20,
      dom: 'Bfrtip',
      // Configure the buttons
      buttons: [
        'print',
        'excel',
        {
          text: this.elTexto,
          key: '1',
          action: function (e, dt, node, config) {
            alert('Button activated');
          }
        }
      ]
    };

button-download.component.ts

import { Component } from '@angular/core';
import { faDownload } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-button-download',
  template: `<fa-icon [icon]="faDownload"></fa-icon> Download`
})
export class ButtonDownloadComponent {
  faDownload = faDownload;
}

Agregar al module los import, declarations y entrycomponents

app.module.ts

...

import { AppComponent } from './app.component';

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { ButtonDownloadComponent } from './buttons/button-download/button-download.component';


@NgModule({
  declarations: [
  ...
    ButtonDownloadComponent
  ],
  ...
  entryComponents: [
    AppComponent,
    ButtonDownloadComponent
  ],

en teoría debería renderizar el asunto completo pero se queda a medias:

<button class="dt-button" tabindex="0" aria-controls="DataTables_Table_0">
  <span>
    <app-button-download>
      <fa-icon class="ng-fa-icon"></fa-icon> Download
    </app-button-download>
  </span>
</button>

3 Custom CSS

Definimos una clase CSS que simula ser fontawesome para poder poner <i class="fe fe-download"></i> Download, en el texto del botón.

Se puede o poner directamente en el app.component.css o inyectar un componente con su css.

Te pongo la segunda opción que es una variación de la propuesta 2

sacamos el svgPathData, width y height de

./node_modules/@fortawesome/free-solid-svg-icons/faDownload.js

y armamos un svg en el css del componente

button-download.component.css

.fe:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  content: " ";
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 1em;
  height: 1em;
  display: inline-block;
  margin: -2px 0;
}
.fe-download:before {
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512"><path fill="currentColor" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z" /></svg>') !important;
}

Actualizamos el template del componente

button-download-component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-button-download',
  template: `<i class="fe fe-download"></i> Download`,
  styleUrls: ['./button-download.component.css']
})
export class ButtonDownloadComponent {}

La ventaja de esto último es que podes prescindir del fontawesome en el componente (y si limpias la app globalmente también) Es básicamente hacer a mano el "Tree shaking" del final bundle.

Nota Si alguien puede discernir por qué no funciona el método 2 (o si es un bug), estaría muy interesado en como resolverlo. Me da la impresión de que está implícito en esta pregunta por eso no abro otra.

1
  • No lo habia pensado de esta manera, muchas gracias. Commented el 8 may. 2018 a las 11:40
1

Usas PHP?, por ejemplo este codigo es boton/icono y al darle click muestra un modal para modificar datos:

<a href="" title="Modificar" class="text-success" data-target="#modificar_datos-<?php echo $f['iduser'] ?>" data-toggle="modal">
<i class="fa fa-fw fa-pencil-square-o"></i>
</a>

Y este es para eliminar el registro de la tabla

<a href="#" data-href="./php/datos_eliminar.php?id=<?php echo $f['iduser']; ?>" data-toggle="modal" data-target="#confirm-delete">
<i class="fa fa-fw fa-trash-o"></i></a>

Y aqui el modal de confirmar si deseas eliminar el registro

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">				
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Eliminar Registro</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
				
<div class="modal-body">¿Desea eliminar este registro?</div>
					
<div class="modal-footer">
<button type="button" class="btn btn-default" data dismiss="modal">Cancelar</button>
<a class="btn btn-danger btn-ok">Eliminar</a>
</div>
</div>
</div>
</div>
		

Saludos

1
  • No uso php, trabajo con Angular Commented el 4 may. 2018 a las 20:41
0

Podrias cargar la/s fuente de font-awesome en tu css e introducir el caracter "a mano" (que es lo que hace basicamente el css de FA, cargar la fuente e introducir los caracteres con :before), pero seria poco eficiente porque cargarias muchos iconos que no vas a usar. Si solo vas a usar unos pocos, quiza te interese más introducirlos como vectores svg y asi puedes cambiarlos al color y tamaño que necesites. Aqui tienes una lista de los iconos de awesome en formato svg y png

https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.