在离子2中使用font-awesome

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (80)

如何使用fontawesomeionic 2的,我下面这个教程,但它不工作。

提问于
用户回答回答于

离子2 RC.0

  • 下载font-awesome库。
  • 在src / assets中创建“字体”文件夹,并从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的更改。

  • 包括将图标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";app.core.scss文件中

将图标包含在HTML中

  <i primary class="fa fa-cart-plus fa-lg"></i>
用户回答回答于

font-awesome离子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.jssass.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/'和not {{WWW}}/assets/fonts/',它是因为font-awesome.css"www/fonts"文件中搜索字体。

  1. 最后加 @import "font-awesome";variables.css (src\theme folder)

执行完所有这些步骤后,您可以在离子2项目中使用font-awesome。

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

所属标签

可能回答问题的人

  • 不吃貓的鱼oo

    5 粉丝466 提问6 回答
  • Richel

    8 粉丝0 提问4 回答
  • 人生的旅途

    10 粉丝484 提问3 回答
  • 发条丶魔灵1

    6 粉丝525 提问3 回答

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励