icons - icon - Usando font-awesome en ionic 2

font awesome ionic

Question

¿Cómo puedo usar fontawesome con ionic 2 He seguido este tutorial pero no funciona.

Answer 1

Actualización para Ionic 2, Ionic 3+: solo un paso:

Agregue un enlace de fuente impresionante a su index.html

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Answer 2

Probé la mayoría de las respuestas anteriores, pero eran demasiado complicadas o tenían una limitación cuando se actualizó el núcleo de Ionic2, así que aquí está mi solución:

Requiere una actualización manual de FA cuando sale una nueva versión, pero no necesito actualizarla a menudo, ya que solo uso unos pocos íconos de selección.

Ignore los archivos SASS y copie el contenido de / node_modules / font-awesome / fonts en / src / asset / fonts. También copie / node_modules / font-awesome / css / font-awesome.min.css en el mismo lugar.

Haz referencia al csss en tu archivo index.html como este:

 <!--Custom Fonts-->
<link href="assets/fonts/comfortaa/comfortaa.css" rel="stylesheet" />
<link href="assets/fonts/gloriahallelujah/gloriahallelujah.css" rel="stylesheet" />
<link href="assets/fonts/font-awesome.min.css" rel="stylesheet" />

Luego, para usarlo, ponga esto en el scss de la página:

 .logo-text {
font-family: ''comfortaa-bold'';
}

y esto en el html:

<h4 class="white-text slogan-text">Come bien a la mitad de precio</h4>

Y eso debería ser ...

Answer 3

Todavía hay mucha confusión sobre cuál es la mejor práctica cuando se trata de agregar FontAwesome a una aplicación ionic2. Escribí un tutorial sobre eso para mitigar algo de esa confusión. Espero que esto ayude a cualquier otra persona en busca de esta información.

http://luiscabrera.site/tech/2017/01/09/fontawesome-in-ionic2.html

Answer 4

Un enfoque similar al que sugirió @Edward, pero una forma un poco más limpia de hacerlo sería

1) npm install font-awesome --save

2) En package.json, agregue

"ionic_copy": "./config/copy.config.js", "ionic_sass": "./config/sass.config.js",

3) Cree los siguientes archivos en el nivel raíz de su proyecto y agregue el siguiente contenido.

En el archivo: ./config/copy.config.js Agregar

const copyConfig = require(''../node_modules/@ionic/app-scripts/config/copy.config'');
copyConfig.copyFonts.src.push(''{{ROOT}}/node_modules/font-awesome/fonts/**/*'');

En el archivo: ./config/sass.config.js Agregar

const sassConfig = require(''../node_modules/@ionic/app-scripts/config/sass.config'');
sassConfig.includePaths.push(''node_modules/font-awesome/scss'');

4) En ./src/theme/variables.scss

$fa-font-path: "../assets/fonts";
@import ''font-awesome'';

Answer 5

Actualización en ionic 2 RC.0

• Descarga la biblioteca de fuentes impresionantes.
• Cree la carpeta de "fuentes" en src / asset y copie las fuentes de la carpeta font-awesome / fonts
• Copie la carpeta scss y péguela bajo src / theme / scss
• Abra el archivo variables.scss y copie el siguiente código

@import "scss / font-awesome"; @ font-face {font-family: ''FontAwesome''; src: url (''../ asset / fonts / fontawesome-webfont.eot? v = # {$ fa-version}'');
src: url (''../ asset / fonts / fontawesome-webfont.eot? # iefix & v = # {$ fa-version}'') formato (''embedded-opentype''),
url (''../ asset / fonts / fontawesome-webfont.woff2? v = # {$ fa-version}'') formato (''woff2''),
url (''../ asset / fonts / fontawesome-webfont.woff? v = # {$ fa-version}'') formato (''woff''),
url (''../ asset / fonts / fontawesome-webfont.ttf? v = # {$ fa-version}'') formato (''truetype''),
Formato url (''../ asset / fonts / fontawesome-webfont.svg? v = # {$ fa-version} #fontawesomeregular'') (''svg''); fuente-peso: normal; estilo de letra: normal; }

Para incluir su icono en HTML

 <i primary class="fa fa-cart-plus fa-lg"></i>

Beta Iónica

Instale fontAwesome desde la biblioteca npm.

Modifique los siguientes cambios a su gulpfile.ts.

• Incluya tarea sencilla para agregar iconos css y fuentes a su compilación

gulp.task(''myCss'', function(){
return gulp.src(''path-to-your-font-lib/style.css'')
.pipe(gulp.dest(''www/build/css''))
});
gulp.task(''myFonts'', function(){
return gulp.src(''path-to-your-font-lib/fonts/**/*.+(eot|svg|ttf|woff)'')
.pipe(gulp.dest(''www/build/fonts''))
});

• Modifique su tarea de compilación y observación de la siguiente manera (agregue su fuente y css en la visualización y creación)

gulp.task(''watch'', [''clean''], function(done){
//existing ionic2 code
}
gulp.task(''build'', [''clean'',''myCss'',''myFonts''], function(done){
//existing ionic2 code
}

Incluya @import "../../node_modules/font-awesome/scss/font-awesome"; en el archivo app.core.scss

Para incluir su icono en HTML

 <i primary class="fa fa-cart-plus fa-lg"></i>

Answer 6

Fuente-impresionante integración de ionic 2 solo con archivos de configuración.

1. Descargue font-awesome a través de npm ( npm install font-awesome --save )

2. En el archivo package.json de tu proyecto agrega esto:

   "config": {
   "ionic_bundler": "webpack",
   "ionic_source_map": "source-map",
   "ionic_copy": "./config/copy.config.js",
   "ionic_sass": "./config/sass.config.js"
   }

3. En la carpeta raíz de su proyecto, cree una carpeta de configuración y copie los archivos copy.config.js y sass.config.js (estos archivos se encuentran en (../node_modules/@ionic/app-scripts/config)

4. Modificar los archivos copiados. En sass.config.js agregue la referencia a font-awesome, al final verifique que tenga algo como esto

   includePaths: [''node_modules / ionic-angular / themes'', ''node_modules / ionicons / dist / scss'', ''node_modules / ionic-angular / fonts'', ''node_modules / font-awesome / scss''],

La parte más importante aquí es la última línea.

en copy.config agrega esto:

copyFontAwesome:{
src: ''node_modules/font-awesome/fonts/'',
dest: ''{{WWW}}/fonts/''
}

La parte más importante aquí es dest ''{{WWW}}/fonts/'' y no {{WWW}}/assets/fonts/'' , porque font-awesome.css busca fuentes en el archivo "www/fonts" .

5. Y finalmente agrega @import "font-awesome"; en variables.css (src/theme folder)

Después de realizar todos estos pasos, puede usar font-awesome en su proyecto ionic 2.

<i class="fa fa-circle" style="color:#14afef; font-size: small"></i>

Es todo