在离子2中使用font-awesome [英] Using font-awesome in ionic 2

问题描述

如何使用 fontawesome 与 ionic 2 ，我关注本教程但它不起作用。

How can i use fontawesome with ionic 2, i've following this tutorial but it's not working.

推荐答案

离子2 RC.0更新

• 下载font-awesome库。


• 在src / assets中创建fonts文件夹并从中复制字体font-awesome / fonts文件夹


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


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

• Download the font-awesome library.
• Create "fonts" folder in src/assets and copy the fonts from the font-awesome/fonts folder
• Copy the scss folder and paste it under src/theme/scss
• Open the variables.scss file, and copy the below code

@importscss / 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}'）
格式（'woff2'），

url（'../ assets / fonts / fontawesome-webfont.woff？v =＃{$ fa-version}'）
format（'woff'），

url（'../ assets / fonts / fontawesome-webfont .ttf？v =＃{$ fa-version}'）
格式（'truetype'），

url（'../ assets / fonts / fontawesome-webfont.svg？v = ＃{$ fa-version} #fontawesomeregular'）
format（'svg'）; font-weight：normal; font-style：normal; }

@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中

To include your icon in HTML

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

Ionic Beta

从npm库安装fontAwesome。

Install fontAwesome from the npm library.

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

Modify the below changes to your 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
}




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

Include @import "../../node_modules/font-awesome/scss/font-awesome"; in app.core.scss file

在HTML中包含您的图标

To include your icon in HTML

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

这篇关于在离子2中使用font-awesome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！