【Appetite】ionic3实录(三)修改自定义图标

常见图标有图像图标和字体图标两种,在移动端,字体图标对比图像图标有不少优点,所以一般采用字体图标为主。而字体图标的优缺点(使用图标字体的优点与缺点 | 骤雨打新荷)摘录如下,有兴趣可了解下:

图标字体的优点: 1、扩展性更强:图标字体可任意缩放、改变颜色、产生阴影或透明效果。 2、灵活性更高:图标字体可以得到CSS的很好支持,大小和颜色都很容易用CSS控制。 3、显示效果佳:矢量图标字体与分辨率无关,无论屏幕PPI高或低,显示效果俱佳。 4、兼容性更广:如果使用得当,图标字体100%可访问,并与几乎所有浏览器兼容。 5、优化效果好:由于图标字体体积更小而携带的信息并未削减,可大大减少HTTP请求。 图标字体的缺点: 1、由于图标字体只能被渲染成单色或者CSS3的渐变色,使得它不能被广泛使用。 2、很多精美图标字体是收费的,不过精美开源的免费图标也越来越多,并提供下载使用。 3、自已创作图标字体费时费力,后期维护成本偏高。

UI效果图给出了所需图标:

image.png

我们需要把它裁切并转成svg格式再生成字体图标,比较繁琐,而我新系统目前也没有装相应软件,所以这里不采用这些图标,选用网上已有类似的字体图标来代替。

免费的字体图标库很多,在这里我们打开阿里的图标库网站iconfont,随便找一个图标库(选图标库而不是选图标,是为了让图标风格一致):

image.png

加入购物车,并下载代码:

image.png

下载完成解压,并把这几个文件拷贝到src/assets/fonts目录中:

iconfont.css
iconfont.eot
iconfont.svg
iconfont.ttf
iconfont.woff

关于图标文件的修改有好几种方法,网上搜索即可,在这里只介绍一种:

  1. 打开iconfont.css修改:

image.png

修改的内容,是为了可以用ionic的方式来使用这些自定义图标(其中,注意前缀是ion-ios-,不是icon-ios-);

注释的内容,沿用ionic的,这里没必要使用;

复制的内容,是为了tab图标在失去焦点后显示另一种状态Outline,如有类似下图的一对图标的话,就其中一个设置为Outline,如果没有,就复制一份设置为Outline。

image.png

  1. 修改tabs.html里的图标名字为这几个自定义图标:
  <ion-tab [root]="tab1Root" tabIcon="zhuye"></ion-tab>
  <ion-tab [root]="tab2Root" tabIcon="bianqian"></ion-tab>
  <ion-tab [root]="tab3Root" tabIcon="xinxi"></ion-tab>
  <ion-tab [root]="tab4Root" tabIcon="lianxiren"></ion-tab>
  1. 最后在index.html里面添加:
<link rel="stylesheet" href="assets/fonts/iconfont.css"> 

或者,可以但不建议在app.scssvariables.scss中import:

@import "../assets/fonts/iconfont.css";

最最后浏览器运行查看下效果,在此就不上图了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序你好

CSS: :before and :after 使用

1053
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第一天 HTML【悟空教程】

一天的学习需要使用众多独立没有关联的标签,为了大家更好的吸收,现给出标签总览,以“重要程度”排序。例如:“表格标签”为今天最重要的标签。

3135
来自专栏无原型不设计

用Mockplus教你使用属性面板的设置交互状态

使用Mockplus软件有段时间了,期间有很多使用者问我组件的设置交互状态怎么用(当然有很多人看了都会用),我就有想把怎样使用设置交互状态的方法记录下来,供初学...

2815
来自专栏无原型不设计

如何用Mockplus快速做一个手风琴菜单?

手风琴菜单是一种比较常用的菜单形式,利用原型工具来做这种菜单通常要用到中继器。即使是功能强大的Axure,想实现该效果也比较麻烦。但如果你对Mockplus有...

2704
来自专栏河湾欢儿的专栏

01-工具 面板 视图

网页分为两步: 1.从设计稿中切出网页素材 比如说:按钮 logo 图片 背景等 2.编写代码,按效果图实现静态页面

1101
来自专栏针针小站

【IFE】Day 2 – 百度前端技术学院 基础学院 学习笔记(二)

1324
来自专栏web编程技术分享

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)说明

本教程是,原文章发布系统教程的精编重制版,会包含每一节的源码,以及修正之前的一些错误。因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一...

2062
来自专栏大前端开发

微信小程序中实现瀑布流布局和无限加载

瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感。

3422
来自专栏编程微刊

6款 jQuery Lightbox图片查看触控插件

偶然间在网上看到的几个图片预览的插件,挺好用的,顺手整理下来。 1:Zoomify – jQuery缩放效果lightbox插件 地址:http://www...

4044
来自专栏前端架构与工程

利用max-height适应多尺寸屏幕的下拉动画

移动设备的特点之一便是屏幕尺寸多种多样,所以我们在制作针对移动设备的动画时必须不同尺寸屏幕的兼容性。比如我们要制作以下动画:红框2为详细内容,默认收起;红框1处...

1858

扫码关注云+社区

领取腾讯云代金券