¿Cómo se agrega Font Awesome a Ionic 4?

Contamos con el resultado a esta traba, al menos eso pensamos. Si continuas con alguna pregunta compártelo en un comentario y con placer te responderemos

Solución:

Para que Font Awesome funcione en un proyecto Ionic 4, puede seguir los pasos a continuación.

En primer lugar, debe instalar todos los paquetes npm, los dos primeros son necesarios, pero puede decidir si necesita el solid, regular o brands íconos, los usaré todos. Continúe y ejecute los siguientes comandos npm en su terminal:

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/angular-fontawesome
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

Una vez que haya hecho eso, navegue a su app.module.ts en su proyecto y agregue lo siguiente:

import  FontAwesomeModule  from '@fortawesome/angular-fontawesome';
import  library  from '@fortawesome/fontawesome-svg-core';

Según los paquetes de fuentes que haya instalado, agregue lo siguiente:

import  fas  from '@fortawesome/free-solid-svg-icons';
import  far  from '@fortawesome/free-regular-svg-icons';
import  fab  from '@fortawesome/free-brands-svg-icons';

Una vez que se hayan importado en la parte superior de su archivo, deberá incluir el FontAwesomeModule en tus importaciones:

.....
imports: [...., FontAwesomeModule],
.....

Una vez más, según los íconos que elija, deberá agregarlos a la biblioteca Font Awesome que se importó anteriormente. Agregue esto debajo de su última importación (arriba @NgModule()):

library.add(fas, far, fab);

Luego navegue hasta el módulo de la página en la que le gustaría usar las fuentes, es decir home.module.ts y luego importar y agregar el FontAwesomeModule:

import  FontAwesomeModule  from '@fortawesome/angular-fontawesome'
....

@NgModule(
    imports: [
        ...
        FontAwesomeModule
        ...
    ],
)

Luego, finalmente, puede usar el ícono en el HTML de esa página insertando lo siguiente donde le gustaría el ícono:

Puedes reemplazar, fas con la biblioteca correcta, es decir far, fas & fab y luego el nombre del icono, que en este caso era graduation-cap.

Ejecute el siguiente comando:

npm install --save-dev @fortawesome/fontawesome-free

Entonces, en angular.json agregue esto en “estilos”:

    "input": "node_modules/@fortawesome/fontawesome-free/css/all.css"

En caso de que alguien se ocupe de FontAwesome PRO. Recientemente compré los íconos profesionales de FontAwesome y los integré así:

• copie la carpeta FontAwesome webfonts en src/assets/
• copie la carpeta FontAwesome scss en src/theme/

• cambie $fa-font-path en _variables.scss con assets/webfonts !default;

• agregar en global.scss

  @importar ‘./tema/[YourDirectoryfontawesomeScss]/fontawesome.scss’;
  @importar ‘./tema/[YourDirectoryfontawesomeScss]/solido.scss’;
  @importar ‘./tema/[YourDirectoryfontawesomeScss]/marcas.scss’;
  @importar ‘./tema/[YourDirectoryfontawesomeScss]/luz.scss’;
  @importar ‘./tema/[YourDirectoryfontawesomeScss]/regular.scss’;

Finalmente puedes usarlos con la etiqueta i. Por ejemplo

Puede encontrar más detalles sobre las clases fa aquí https://fontawesome.com/how-to-use/on-the-web/setup/getting-started

valoraciones y comentarios

Recuerda dar recomendación a esta crónica si lograste el éxito.

---

---

Utiliza Nuestro Buscador