web-dev-qa-db-ja.com

ionic 2でfont-awesomeを使用する

fontawesomeとionic 2、私は このチュートリアル に従っていますが、動作していません。

iconsfont-awesomeionic2
18
mahmoudismail

ionic 2 RC.で更新

  • フォントの素晴らしいライブラリをダウンロードしてください。
  • 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'）;フォントの太さ：通常。フォントスタイル：通常。 }

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"; in app.core.scssファイル

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

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

font-awesome ionic 2構成ファイルのみとの統合。

  1. Npm（_npm install font-awesome --save_）経由でフォントをダウンロードする

  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/'
}
_

ここで最も重要な部分は_'{{WWW}}/fonts/'_ではなくdest _{{WWW}}/assets/fonts/'_であり、_font-awesome.css_は_"www/fonts"_ファイル内のフォントを検索するためです。

  1. 最後に、variables.css (src\theme folder)に_@import "font-awesome";_を追加します

このすべての手順を実行した後、ionic 2プロジェクトでfont-awesomeを使用できます。

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

すべてだ

23
Edward Campos

@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';
8
BBios

FontAwesomeをionic2アプリに追加する際のベストプラクティスについては、依然として多くの混乱があります。その混乱を緩和するために、私はそれについてのチュートリアルを書きました。これがこの情報を探している他の誰かに役立つことを願っています

http://luiscabrera.site/tech/2017/01/09/fontawesome-in-ionic2.html

2
Luis Cabrera

Ionic 2、Ionic 3+：ワンステップ：

フォントの素晴らしいリンクをindex.htmlに追加します

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
1
Duannx

上記の答えのほとんどを試しましたが、Ionic2のコアがアップグレードされたときに複雑すぎるか制限があったため、ここに私の解決策があります。

新しいバージョンがリリースされた場合、FAを手動でアップグレードする必要がありますが、いくつかの選択したアイコンのみを使用するため、頻繁にアップグレードする必要はありません。

SASSファイルを無視し、\ node_modules\font-awesome\fontsの内容を\ src\assets\fontsにコピーします。また、\ node_modules\font-awesome\css\font-awesome.min.cssを同じ場所にコピーします。

次のように、index.htmlファイルでcsssを参照します。

  <!--Custom Fonts-->
  <link href="assets/fonts/comfortaa/comfortaa.css" rel="stylesheet" />
  <link href="assets/fonts/gloriahallelujah/gloriahallelujah.css" rel="stylesheet" />
  <link href="assets/fonts/font-awesome.min.css" rel="stylesheet" />

次に、使用するには、これをページのscssに入れます。

  .logo-text {
    font-family: 'comfortaa-bold';
  }

そして、これはhtmlで：

<h4 class="white-text slogan-text">Come bien a la mitad de precio</h4>

そしてそれはそれであるはずです...

1
Rodney