ionic自定义图标
来源:互联网 发布:php高性能框架 编辑:程序博客网 时间:2024/06/05 00:25
前提
有时候我们需要根据实际需求修改tabs和ionic其他的图标,有试过png来设置background,但效果不是很好。
ionic所提供的图标在www/lib/ionic/fonts目录下,四个字体文件,如图所示:
所以我们自定义的图标也需要生成这样的字体文件。
介绍三个字体库:
- 阿里图标库
- icomoon
- fontello
这里就拿fontello来举例吧:
- 步骤一:
- 所需的图标格式必须是svg格式
- 把要生成的图标拖进去
- 步骤二:
- 拖进去后选择,未选择是灰色的,选择后是如图所示
- 点击图标可以修改图标命名等
- 然后点击 Download webfont下载
- 步骤三:
- 下载后打开font目录的五个字体文件粘贴到www/lib/ionic/fonts目录下
- 步骤四:
- css目录下就把fontello.css粘贴到www/lib/ionic/css目录下
- 步骤五:
- fontello.css文件注意路径是否正确
- 若要自定义大小就添加font-size,因为是字体文件
- 步骤六:
- 在index.html文件中添加该样式
- 在tabs.html文件中应用图标
最终效果:
最后提一下:
icomoon网站操作方法大同小异,但是在自定义图标大小上目前没有找到解决办法,遂用了fontello,若发现能改变大小,望解惑。
0 0
- ionic 自定义图标
- ionic自定义图标
- ionic自定义图标
- Ionic自定义图标
- ionic自定义图标心得分享
- ionic自定义图标心得分享
- 修改ionic图标闪烁
- ionic 替换图标
- ionic修改主图标
- 使用ionic开发手机app中,设置tab中的icon为自定义图标的方法
- ionic 修改图标,启动图
- Ionic 自动生成启动图标
- ionic 自定义teb切换
- Ionic开发自定义插件
- 自定义ionic插件
- ionic自定义插件
- ionic 自定义弹框
- ionic自定义组件
- ORACLE ORA-04030之 out of process memory when trying to allocate
- Linux 添加Nginx 到 service 启动 (完整篇)
- STM32 自定义延时函数
- C++大牛blog地址
- com.esotericsoftware.kryo.KryoException: Buffer overflow. Available: 0, required: 1
- ionic自定义图标
- 快速排序(Quick_Sort)
- ELK + Redis 日志分析系统 -学习第一天
- HTTPS 升级指南
- 微信分享域名防屏蔽 防拦截网址系统 免费实时查询域名是否被微信拦截实时检测微信屏蔽域名api
- linux操作系统管理
- ora-47995 如何在windows环境下禁用Database Vault
- maven 配置报错 JAVA_HOME not found
- HTC Vive初体验 简单场景的搭建 基本的输入检测