专栏首页ionic3+【技巧】ionic3修改自定义图标

【技巧】ionic3修改自定义图标

便于归类,从自己的文章拷贝过来: 【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 条评论
登录 后参与评论

相关文章

  • IOS移动开发从入门到精通 视图UIView、层CALayer(2)

    或者修改 rootViewController参数 2、弹出框: import UIKit class ViewController:UIViewCont...

    用户5760343
  • mac抓包工具简介—Charles

    我们经常在工作中使用到各种工具去对网络请求进行拦截。抓包的工具有很多,适用于不同的平台和场景,例如:Charles、Fiddler、Wireshark等等,在w...

    软测小生
  • IOS,安卓,Windows和塞班,你最喜欢哪个?为什么?

    从事软件开发多年,主要用C/C++,java三种编程语言开发,IOS,安卓,windows,塞班四个系统除了IOS没怎么玩过,其余三种系统都做过对应的开发,其中...

    程序员互动联盟
  • 微软打算重新拥抱安卓 弥补曾经4000 亿美元的错误

    6月27日消息,Microsoft信仰中心昨日发布微博称:微软打算重新拥抱安卓,即将发布的 Windows Lite 系统将引入安卓应用以及安卓应用商店支持,W...

    IT大咖说
  • iOS开发:获取WiFi名称(解决iOS12.0以上系统不能正常获取WiFi名称的方法)

    今天五一劳动节,依然正常上班,然后就发一篇文章呗。前段时间在开发过程中遇到一个问题,就是之前设置的获取手机连接WiFi名称的方法不起作用了,后来经查发现是因为新...

    三掌柜
  • bootstrap 导航栏 淡入淡出 常用样式

    <ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#home" data-...

    用户5760343
  • ios系统未来有没有可能开源?

    苹果玩的就是闭环系统,现在苹果系统利润非常高,虽然现在苹果手机的风头已经没有当初那么风光了,但一个产品不可能数十年如一日的强大,因为现在竞争对手已经上来了,苹果...

    程序员互动联盟
  • bootstrap 滚动监听

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 滚...

    用户5760343
  • bootstrap nav 导航菜单

    nav nav-tabs <p>标签式的导航菜单</p> <ul class="nav nav-tabs"> <li class="active"><a ...

    用户5760343
  • Swift 三天上手项目,学习经验总结!

    环境 - 基本语法 - 数据类型 - 变量 - 可选项 - 常量 - 字面量 - 运算符 - 条件语句 - 循环 - 字符串 - 字符 - 数组 - 字典 - ...

    iOSSir

扫码关注云+社区

领取腾讯云代金券