问在ionic 2中使用font-awesome

EN

ionic 2 RC.0中的更新

在src/

• 中下载font- below library.

• Create " fonts“文件夹，并从font-below/fonts文件夹中复制字体，然后复制scss文件夹并将其粘贴到src/theme/scss

• Open variables.scss文件下，然后复制下面的代码

@import“scss/font-face”；@font-face { font-family：'FontAwesome'；src: url('../assets/fonts/fontawesome-webfont.eot?v=#{$fa-version}')；

源: url('../assets/fonts/fontawesome-webfont.eot?#iefix&v=#{$fa-version}')格式(‘embedded-opentype’)，

url('../assets/fonts/fontawesome-webfont.woff2?v=#{$fa-version}')格式(‘woff2’)，

url('../assets/fonts/fontawesome-webfont.woff?v=#{$fa-version}')格式(‘woff’)，

url('../assets/fonts/fontawesome-webfont.ttf?v=#{$fa-version}')格式(‘truetype’)，

url('../assets/fonts/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular')格式(‘svg’)；字体粗细:正常；字体样式:正常；}

在HTML中包含图标的步骤

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

离子测试版

从npm库安装fontAwesome。

修改以下对您的gulpfile.ts的更改。

build

• 包括用于向build

添加图标css和字体的gulp任务

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(‘监视’，‘清理’，函数(完成){//现有ionic2代码}gulp.task(‘构建’，‘清理’，'myCss'，'myFonts'，函数(完成){//现有ionic2代码}

在app.core.scss文件中包含@import "../../node_modules/font-awesome/scss/font-awesome";

在HTML中包含图标的步骤

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

字体-只有配置文件才能与ionic 2集成。

通过npm (npm install font-awesome --save)

• In从你的项目中下载

1. 文件package.json添加如下：

" config "：{ "ionic_bundler"："webpack"，"ionic_source_map"："source-map"，"ionic_copy"："./config/copy.config.js"，"ionic_sass"："./config/sass.config.js“}

• 在您的工程根文件夹中创建config文件夹，并复制copy.config.js和sass.config.js文件(此文件位于复制的文件中)。在sass.config.js中添加对font- add的引用，在最后验证您是否有类似于thisincludePaths的内容：‘node_modules/ In angular/themes’，‘node_modules/In ionicons/dist/scss’，'node_modules/ionic-angular/fonts'，'node_modules/ font-awesome /scss‘，

这里最重要的部分是最后一行。

在copy.config中添加以下内容：

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

在variables.css (src\theme folder)中添加

1. ，最后添加@import "font-awesome";

执行完所有这些步骤后，您就可以在ionic 2项目中使用font- After了。

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

就这些了

与@Edward建议的方法类似，但更简洁的方法是

1) npm install font-awesome --save

2)在package.json中，添加

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

3)在您的项目根级创建以下文件，并添加以下内容。

在文件中：./config/copy.config.js Add

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

在文件中：./config/sass.config.js Add

const sassConfig = require('../node_modules/@ionic/app-scripts/config/sass.config');

sassConfig.includePaths.push('node_modules/font-awesome/scss');

4)在./src/theme/variables.scss中

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