Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

Ionic 2 中使用 Font Awesome 字体

Posted on 2017年4月26日 by king2088

在我以前的Ionic(1.3)应用程序中,我使用了“Font Awesome”作为一个图标集,但在Ionic 2中有很多变化。我使用的gulp脚本已经消失,构建过程在npm包中定义。
您可以在https://github.com/driftyco/ionic-appscripts上阅读更多信息

以下是在Ionic 2中如何做:

我们开始创建一个新的应用程序或cd到你现有的应用程序文件夹。
$ ionic start ionic2FontAwesome blank --v2
$ cd ionic2FontAwesome

我们来添加Font Awesome并保存到你的package.json。
$ npm install font-awesome --save
在项目根目录下创建配置文件夹。
$ mkdir config
找到此文件夹中的copy.config.js文件:/node_modules/@ionic/app-scripts/config/copy.config.js
,并将其复制到刚刚创建的文件夹。

更新文件如下(注意看最后两行copyFontAwesomeCSS和copyFontAwesome):

module.exports = {
copyAssets: {
src: ['{{SRC}}/assets/**/*'],
dest: '{{WWW}}/assets'
},
copyIndexContent: {
src: ['{{SRC}}/index.html', '{{SRC}}/manifest.json', '{{SRC}}/service-worker.js'],
dest: '{{WWW}}'
},
copyFonts: {
src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*'],
dest: '{{WWW}}/assets/fonts'
},
copyPolyfills: {
src: ['{{ROOT}}/node_modules/ionic-angular/polyfills/polyfills.js'],
dest: '{{BUILD}}'
},
copyFontAwesomeCSS: {
src: '{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css',
dest: '{{WWW}}/assets/css/'
},
copyFontAwesome: {
src: '{{ROOT}}/node_modules/font-awesome/fonts/**/*',
dest: '{{WWW}}/assets/fonts/'
}
}

更改项目根目录下package.json,因此它使用新的配置复制文件:

...
"scripts": {
"build": "ionic-app-scripts build",
"watch": "ionic-app-scripts watch",
"serve:before": "watch",
"emulate:before": "build",
"deploy:before": "build",
"build:before": "build",
"run:before": "build"
},
"config": {
"ionic_copy": "./config/copy.config.js"
},
"dependencies": {
...

在src/index.html中添加此行,以包含font-awesome css文件。

... ...

更改page/home/home.html以检查它是否正常工作:




Ionic Blank



  Font Awesome



启动查看下效果吧(一定要注意,如果你在修改前,已经启动了ionic,那么请重启后才会生效):

$ ionic serve
如果你想看看如何做sass的方式,你可以使用Sass来检查我的帖子Ionic 2和Font Awesome。

您可以在这里下载一个工作版本。

如果您想阅读关于在您的Ionic 2应用程序中使用其他字体,您可以在https://chriztalk.com/using-google-fonts-ionic-2/上阅读我的 信息。

[本文译自:https://chriztalk.com/ionic-2-font-awesome/]

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2022年 7月
一 二 三 四 五 六 日
 123
45678910
11121314151617
18192021222324
25262728293031
« 10月    
© 2022 小小前端 | Powered by Superbs Personal Blog theme