在离子2中使用font-awesome

Question

如何使用fontawesome用ionic 2的,我下面这个教程,但它不工作.

Answer 1

更新离子2 RC.0

• 下载font-awesome库.
• 在src/assets中创建"fonts"文件夹,然后从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}')格式('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 ')格式(' SVG'); font-weight:normal; font-style:normal; }

在HTML中包含您的图标

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

离子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构建和监视任务,如下所示(在watch和build上添加你的字体和css)

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

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

在HTML中包含您的图标

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

Answer 2

font-awesome ionic 2仅与配置文件集成.

1. 通过npm(npm install font-awesome --save)下载font-awesome

2. 在你的项目的package.json文件中添加:

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

3. 在你的项目的根文件夹中创建config文件夹和文件复制copy.config.js和sass.config.js(该文件位于(..\node_modules\@ionic\app-scripts\config)

4. 修改复制的文件.在sass.config.js中添加对font-awesome的引用,最后验证你有类似的东西

   includePaths:['node_modules/ionic-angular/themes','node_modules/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/'
}

这里最重要的部分是dest '{{WWW}}/fonts/'而不是{{WWW}}/assets/fonts/'它,因为它font-awesome.css在"www/fonts"文件中搜索字体.

5. 最后加 @import "font-awesome";在variables.css (src\theme folder)

执行完所有这些步骤后,您可以在离子2项目中使用font-awesome.

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

这就是全部

Answer 3

类似于@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 添加

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 添加

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