在 ionic 2 中使用 font-awesome

Question

我如何将 fontawesome 与ionic 2 一起使用，我关注了this tutorial，但它不起作用。

Answer 1

ionic 2 RC.0 中的更新

• 下载 font-awesome 库。
• 在 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 和 watch 任务（添加你的字体 和 css 观看和构建）

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

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

在 HTML 中包含您的图标

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

Answer 2

font-awesome ionic 2 仅与配置文件集成。

1. 通过 npm (npm install font-awesome --save) 下载 font-awesome

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 的引用， 最后验证你有这样的东西

   包含路径：[ '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. 最后在variables.css (src\theme folder) 中添加@import "font-awesome";

执行所有这些步骤后，您可以在您的 ionic 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 文件中的 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>

应该就是这样……

Answer 6

Ionic 2、Ionic 3+ 的更新：只需一步：

为您的index.html添加字体真棒链接

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