フォントの使用-ionic2で素晴らしい

ionic 2RC.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}'）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; フォントスタイル：通常; }

アイコンをHTMLに含めるには

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

イオンベータ

npmライブラリからfontAwesomeをインストールします。

以下の変更をgulpfile.tsに変更します。

• アイコンの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('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>