在离子2中使用font-awesome

Question

我如何使用ionic 2 fontawesome ，我已经按照本教程，但它不起作用。

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}'）format（'embedded-opentype'），
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'）format（'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下载font-awesome（ 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. 在项目的根文件夹中创建配置文件夹并复制文件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';

Answer 4

在将FontAwesome添加到ionic2应用程序时，对于什么是最佳实践仍存在很多困惑。 我写了一篇关于它的教程来缓解一些混乱。 我希望这有助于其他人在那里寻找这个信息

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

Answer 5

我尝试了上面的大部分答案，但是当Ionic2的核心升级时它们太复杂或者有限制，所以这是我的解决方案：

当新版本问世时，它需要手动升级FA，但我不需要经常升级，因为我只使用了几个选择图标。

忽略SASS文件并将\\ node_modules \\ font-awesome \\ fonts的内容复制到\\ src \\ assets \\ fonts。 同时将\\ node_modules \\ font-awesome \\ css \\ font-awesome.min.css复制到同一个地方。

在index.html文件中引用css，如下所示：

  <!--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>

这应该是......

Answer 6

更新Ionic 2，Ionic 3+：只需一步：

将index-awesome链接添加到index.html

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