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

把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. 马尔可夫决策过程MDP

    1. 马尔可夫模型的几类子模型 马尔科夫链(Markov Chain),了解机器学习的也都知道隐马尔可夫模型(Hidden Markov Model,HMM).它们具有的一个共同性质就是马尔可夫性(无 ...

  2. 云存储上传控件(cloud2)-Xproer.HttpUploader7

    版权所有 2009-2016 荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/cloud2/ ...

  3. 编写高质量代码改善C#程序的157个建议——建议125：避免用FCL的类型名称命名自己的类型

    建议125:避免用FCL的类型名称命名自己的类型 试想过自己写一个Socket类型吗?如果没有,我们来尝试一下: public class Socket { //省略 } 把以上代码同某些其他工具类封 ...

  4. [Lua快速了解一下]Lua的Table

    Lua中的Table其实就是一个Key Value的structure haoel = {name=, handsome=True} -table的CRUD操作 haoel.website=" ...

  5. C/C++学习的50个经典网站

    C/C++是最主要的编程语言.这里列出了50名优秀网站和网页清单,这些网站提供c/c++源代码.这份清单提供了源代码的链接以及它们的小说明.我已尽力包括最佳的C/C++源代码的网站.这不是一个完整的清 ...

  6. Panda3d code in github

    https://github.com/panda3d/panda3d [ref files] http://www.panda3d.noie.name/ https://www.panda3d.org ...

  7. uni-app开发踩坑记录

    大部分问题是我在h5端看不到而在android.iOS平台上暴露出来的,不包含小程序 1.:class="['defaultStyle', dynamicStyle]" 不支持直接 ...

  8. binlog2sql

    从MySQL binlog解析出你要的SQL.根据不同选项,你可以得到原始SQL.回滚SQL.去除主键的INSERT SQL等. 安装 shell> git clone https://gith ...

  9. objectARX加载lisp函数、源码的一种方式

    //感谢高飞鸟highflybird版主的思路以及研究. //先声明非公开函数acedEvaluateLisp extern int acedEvaluateLisp(const ACHAR*,str ...

  10. React-Native 工程添加推送功能 （iOS 篇）

    推送已经是是手机应用的基本功能,如果自己实现一套推送系统费时费力,所有一般我们会使用第三方的推送服务,这里我使用「极光推送」作为集成推送的例子,因为有现成的 react native 插件 jpush ...