Question

我如何将{strong> fontawesome 与ionic 2一起使用，我跟随this tutorial，但它无效。

Answer 1

离子2 RC.0更新

下载font-awesome库。
在src / assets中创建“fonts”文件夹并从font-awesome / fonts文件夹中复制字体
复制scss文件夹并将其粘贴到src / theme / scss
打开variables.scss文件，然后复制以下代码

@import“scss / font-awesome”; @字体面   {font-family：'FontAwesome'; SRC：   URL（ '？../资产/字体/ fontawesome-webfont.eot V =＃{$ FA-版本}'）;
  SRC：   URL（ '../资产/字体/ fontawesome-webfont.eot＃iefix和放大器; V =＃{$ FA-版本}'）   格式（ '嵌入的OpenType'），
  URL（ '../资产/字体/ fontawesome-webfont.woff2？V =＃{$ FA-版本}'）   格式（ 'woff2'），
  URL（ '../资产/字体/ fontawesome-webfont.woff？V =＃{$ FA-版本}'）   格式（ 'WOFF'），
  URL（ '../资产/字体/ fontawesome-webfont.ttf？V =＃{$ FA-版本}'）   格式（ '的TrueType'），
  URL（ '../资产/字体/ fontawesome-webfont.svg？V =＃{$ FA-版本} #fontawesomeregular'）   格式（ 'SVG'）; font-weight：normal; font-style：normal; }

将您的图标包含在HTML

中

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

Ionic Beta

从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 on watch and build）

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仅与配置文件集成。

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

includePaths：[ ＆＃39; node_modules /离子 - 角/主题＆＃39 ;, ＆＃39; node_modules / ionicons / DIST / SCSS＆＃39 ;, ＆＃39; node_modules /离子 - 角/字体＆＃39 ;, ＆＃39; node_modules /字体真棒/ SCSS＆＃39; ]，

这里最重要的部分是最后一行。

copy.config

添加此内容：

copyFontAwesome:{
    src: 'node_modules/font-awesome/fonts/',
    dest: '{{WWW}}/fonts/'
}

这里最重要的部分是dest '{{WWW}}/fonts/'而不是{{WWW}}/assets/fonts/'，因为font-awesome.css搜索"www/fonts"文件中的字体。

最后在@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+的更新：只需一步：

为您的public ApiResponse<IEnumerable<Customers>> getCustomersById(string id){ var retVal = new ApiResponse<IEnumerable<Customers>>(); var isAuthenticated = tokenAuthorization.validateToken(access_token); if(!isAuthenticated){ retVal.Message="You are not authrized"; return retVal; } try{ var data = yourList; retVal.IsSuccess = true; retVal.Data = yourList; } catch(exception ex){ retVal.Message=yourmessage; } return retVal; }

添加font-awesome链接

index.html

在离子2中使用font-awesome

6 个答案:

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