在 ionic 2 中使用 font-awesome

Question

我如何使用 fontawesome with ionic 2, i've following this tutorial 但它不起作用。

Answer 1

在 ionic 2 RC.0 中更新

下载超棒的字体库。
在 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; font-style: normal; }

将您的图标包含在 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){    
//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

字体很棒的 ionic 2 仅与配置文件集成。

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

在您项目的文件 package.json 中添加：

"config": {
    "ionic_bundler": "webpack",
    "ionic_source_map": "source-map",
    "ionic_copy": "./config/copy.config.js",
    "ionic_sass": "./config/sass.config.js"
}

在项目的根文件夹中创建配置文件夹并复制文件 copy.config.js 和 sass.config.js（此文件位于 (..\node_modules\@ionic\app-scripts\config)
修改复制的文件。在 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" 文件中搜索字体。

最后在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出新版本需要手动升级，不过我只用select个图标，所以不需要经常升级。

忽略 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+ 更新：只需一步：

将超棒的字体 link 添加到您的 index.html

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

在 ionic 2 中使用 font-awesome

Using font-awesome in ionic 2

icons

font-awesome

ionic2

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