icons - 在ionic 2中使用 Font Awesome

Question

我如何将和一起使用ionic 2，我一直在关注fontawesome，但无法正常工作。

Answer 1

在ionic 2 RC.0中更新

下载真棒字体库。

在src / assets中创建“字体”文件夹，然后从font-awesome / fonts文件夹中复制字体

复制scss文件夹并将其粘贴到src / theme / scss

下

打开variables.scss文件，然后复制以下代码

@import "scss/font-awesome"; @font-face { font-family: 'FontAwesome'; src: url('../assets/fonts/fontawesome-webfont.eot?v=#{$fa-version}');
src: url('../assets/fonts/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
url('../assets/fonts/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
url('../assets/fonts/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
url('../assets/fonts/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
url('../assets/fonts/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; }

在HTML中包含您的图标

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

ionic Beta

从npm库安装fontAwesome。

将以下更改修改为gulpfile.ts。

包括gulp任务，用于将图标css和字体添加到构建

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'))    
});

如下修改您的gulp构建和监视任务(添加字体
和CSS进行观看和构建)

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

在 app.core.scss 文件中包括 @import "../../node_modules/font-awesome/scss/font-awesome";
在HTML中包含您的图标

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