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

问题描述

我如何将 fontawesome 与 ionic 2 一起使用，我已经遵循 本教程 但它不起作用.

解决方案

ionic 2 RC.0 更新

• 下载字体真棒库.
• 在 src/assets 中创建fonts"文件夹并从 font-awesome/fonts 文件夹中复制字体
• 复制scss文件夹，粘贴到src/theme/scss下
• 打开 variables.scss 文件，复制以下代码

<块引用>

@import "scss/font-awesome";@字体脸{字体系列:'FontAwesome';源代码:url('../assets/fonts/fontawesome-webfont.eot?v=#{$fa-version}');
源代码:url('../assets/fonts/fontawesome-webfont.eot?#iefix&v=#{$fa-version}')格式('嵌入式开放式')，
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.

• 包含 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 build and watch 任务(添加你的字体和 css 观看和构建)

<块引用>

gulp.task('watch', ['clean'], function(done){//现有的ionic2代码}gulp.task('build', ['clean','myCss','myFonts'], function(done){//现有的ionic2代码}

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

在 HTML 中包含您的图标

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

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

解决方案

Update in ionic 2 RC.0

• 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

@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; }

To include your icon in HTML

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

Ionic Beta

Install fontAwesome from the npm library.

Modify the below changes to your gulpfile.ts.

• Include gulp task for adding icon css and fonts to your build

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

• Modify your gulp build and watch task as follows (Adding your font and css on watch and build)

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

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

To include your icon in HTML

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

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