在阿里图标库下载自己所需要的图标解压为一下目录

把iconfont.xx文件全部放到src/assets/fonts/文件夹下，可以全部替换里面的文件，但是要把之前iconfont.css文件下的文件修改

自定义的图片下的

修改后的

注：在ionic3中引用图标主要靠名称来引用，因为我项目已经声明为ios模式，所以类名都是ion-ios-*，其中像.ion-ios-user-outline这种是tab未被选中时的样式，每一个图标类后面必须再加一个-outline的类，不然字体图标会无法显示。

用起来

这样就可以用你自己的图标了，ionic自带的图标也是可以用滴。

在ionic3+angular4项目中添加自定义图标的更多相关文章

  1. iconfont 怎么在项目中使用图标库

    iconfont是很多设计以及前后端人员编写页面时经常用到的网站,阿里不仅为我们提供了免费的图标库,并且有一套完整的图标库体系.很多初学者只知道从图标库中下载图标放入项目中,但在实际项目应用中,过多的 ...

  2. vue项目中icon图标的完美引入

    第一步: 进入阿里矢量图标库并登录 地址:https://www.iconfont.cn 第二步: 选择项目需要的图标添加到库 第三步: 选完之后点击右上角的购物车,打开后点击添加到项目,没有就自己建 ...

  3. easyui中tree控件添加自定义图标icon

    来源于:http://blog.163.com/lintianhuanhai@126/blog/static/165587366201421704420256/ <!DOCTYPE html&g ...

  4. 在项目中增加自定义icon图标

    以MUI框架为例,内容来自于MUI官网. mui如何增加自定义icon图标 mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标:其次,mui中的图标并不是图片,而 ...

  5. AngularCli项目中添加字体图标（Font）详解

    本文主要讲如何在AngularCli生成的项目中使用字体图标. 一 SVG图标准备 将需要转换为字体图标的图片转换为SVG格式. 这个让项目视觉设计师搞定即可. 二 SVG图标转Font 可以通过Ic ...

  6. vue项目中使用iconMoon图标

    前两篇文章写了一下如何在vue项目中使用vue-awesome和阿里的iconfont,这里介绍一下如何使用iconMoon图标 iconMoon和前两者相比可以生成自己的矢量图,这点是我喜欢的.至于 ...

  7. vue项目中使用阿里iconfont图标

    在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...

  8. 使用iconfont管理项目中的字体图标

    先来说说字体图标的好处: 很容易任意地缩放: 很容易地改变颜色: 很容易地产生阴影: 可以拥有透明效果: 一般来说,有先进的浏览器支持: 可以使用CSS来装饰(可以得到CSS很好支持): 可以快速转化 ...

  9. [Swift通天遁地]九、拔剑吧-(2)在项目中使用大量美观的图标

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

随机推荐

  1. Apache Shiro 10分钟之旅！

    欢迎来到Apache Shiro 10分钟之旅! 希望通过这个简单.快速的示例,可以让你对应用程序中使用Shiro有个深入的了解.嗯,10分钟你应该可以搞定它. 概述 Apache Shiro是什么? ...

  2. node后台启动

    node启动后会占用当前shell 后台启动方式: 1.用forever进行管理 npm install -g forever forever start index.js   2.使用nohub命令 ...

  3. Delphi 实现 图灵机器人API（IDHTTP POST ）

    此功能所需的 Key及接口文档,都可以在图灵机器人的官网下载, 小伙伴们需要申请自己的图灵机器人账号. 申请方法请自行百度“图灵机器人”  . 登录账号后,在左侧的[机器人接入],获取需要的信息,记得 ...

  4. Android-xx倍图

    图片文件夹对应倍图关系: ldpi 0.75 倍图 mdpi   1.0 倍图   hdpi    1.5 倍图 xhdpi  2.0 倍图 xxhdpi    3.0 倍图 xxxhdpi  4.0 ...

  5. First App on Phonegap | Cordova

    Phonegap简介 PhoneGap是一能够让你用普通的web技术编写出能够轻松调用api接口和进入应用商店的 html5应用开发平台,是唯一支持7个平台的开源移动框架. 优势: 1.兼容性:多平台 ...

  6. 【python】@property装饰器

    Python内置的@property装饰器可以把类的方法伪装成属性调用的方式.也就是本来是Foo.func()的调用方法,变成Foo.func的方式.在很多场合下,这是一种非常有用的机制. class ...

  7. JavaScript 用new创建对象的过程

       在JavaScript中创建自定义对象都需要用new运算符,那么创建对象的过程是什么样的呢? 例如现在有如下构造函数: function Person(name) { this.name = n ...

  8. 「HNOI 2014」 画框

    题目链接 戳我 \(Solution\) 这一题很像最小乘积生成树.只是把\(kruskal\)变为了\(km\)/费用流 现在来讲一讲最小乘积生成树.首先将\(\sum a_i\)和\(\sum b ...

  9. 2018.11-2019.1的随记|NOIP的考后随记

    就是日记吧?(这里就是写一些乱七八糟的东西qwq,当作自己的零散想念吧 1.24 今天跟着BLUESKY他们的视频一起领略了一下远在广州的CCF冬令营开幕式,看着ljh的拍的照片也体验了一下RM冬令营 ...

  10. CH的电影推荐

    1.推荐电影 张艺谋:一个都不能少 2.下载站点 TL95