1、图标

/* ---html----*/

<ion-content text-center class="icons-basic-page">

  <ion-row>

    <ion-col><ion-icon name='ionic'></ion-icon></ion-col>

    <ion-col><ion-icon name='logo-angular'></ion-icon></ion-col>

    <ion-col><ion-icon name='ionitron'></ion-icon></ion-col>

  </ion-row>

  <ion-row>

    <ion-col><ion-icon name='heart'></ion-icon></ion-col>

    <ion-col><ion-icon name='apps'></ion-icon></ion-col>

    <ion-col><ion-icon name='happy'></ion-icon></ion-col>

  </ion-row>

  <ion-row>

    <ion-col><ion-icon name='people'></ion-icon></ion-col>

    <ion-col><ion-icon name='person'></ion-icon></ion-col>

    <ion-col><ion-icon name='contact'></ion-icon></ion-col>

  </ion-row>

  <ion-row>

    <ion-col><ion-icon name='lock'></ion-icon></ion-col>

    <ion-col><ion-icon name='key'></ion-icon></ion-col>

    <ion-col><ion-icon name='unlock'></ion-icon></ion-col>

  </ion-row>

  <ion-row>

    <ion-col><ion-icon name='map'></ion-icon></ion-col>

    <ion-col><ion-icon name='navigate'></ion-icon></ion-col>

    <ion-col><ion-icon name='pin'></ion-icon></ion-col>

  </ion-row>

  <ion-row>

    <ion-col><ion-icon name='mic'></ion-icon></ion-col>

    <ion-col><ion-icon name='musical-notes'></ion-icon></ion-col>

    <ion-col><ion-icon name='volume-up'></ion-icon></ion-col>

  </ion-row>

  <ion-row>

    <ion-col><ion-icon name='cafe'></ion-icon></ion-col>

    <ion-col><ion-icon name='calculator'></ion-icon></ion-col>

    <ion-col><ion-icon name='bus'></ion-icon></ion-col>

  </ion-row>

  <ion-row>

    <ion-col><ion-icon name='camera'></ion-icon></ion-col>

    <ion-col><ion-icon name='cube'></ion-icon></ion-col>

    <ion-col><ion-icon name='image'></ion-icon></ion-col>

  </ion-row>

  <ion-row>

    <ion-col><ion-icon name='star'></ion-icon></ion-col>

    <ion-col><ion-icon name='wine'></ion-icon></ion-col>

    <ion-col><ion-icon name='pin'></ion-icon></ion-col>

  </ion-row>

  <ion-row>

    <ion-col><ion-icon name='arrow-back'></ion-icon></ion-col>

    <ion-col><ion-icon name='arrow-dropdown'></ion-icon></ion-col>

    <ion-col><ion-icon name='arrow-forward'></ion-icon></ion-col>

  </ion-row>

  <ion-row>

    <ion-col><ion-icon name='sunny'></ion-icon></ion-col>

    <ion-col><ion-icon name='umbrella'></ion-icon></ion-col>

    <ion-col><ion-icon name='rainy'></ion-icon></ion-col>

  </ion-row>

</ion-content>

/* ---html----*/

当然可以使用 平台特定 图标
<ion-icon ios="logo-apple" md="logo-android"></ion-icon>

是 ios 的时候显示 ios的图标 ， 别的则显示 Android的图标

 
变量的图标： 使用一个变量设置一个图标：
<ion-icon [name]="myIcon"></ion-icon>

export class MyFirstPage {

  myIcon: string = "home";

}

6、图标：icon的更多相关文章

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

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

  2. Expo大作战(十一)--expo中的预加载和缓存资产(Preloading & Caching Assets),expo中的图标 (Icon)

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  3. Font Awesome-用CSS实现各种小图标icon

    Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果.官网:http://fontawesome.dashga ...

  4. 百度地图－修改marker图标(icon)

    百度地图-修改marker图标(icon) 学习了:https://blog.csdn.net/clh604/article/details/9412291/ 源码膜拜: var map = new ...

  5. amazeui学习笔记--css（常用组件6）--图标Icon

    amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...

  6. 3D深色金属哥特3D项目工具小图标icon高清设计素材

    3D深色金属哥特3D项目工具小图标icon高清设计素材

  7. Jetpack Compose学习(3)——图标(Icon) 按钮(Button) 输入框(TextField) 的使用

    原文地址: Jetpack Compose学习(3)--图标(Icon) 按钮(Button) 输入框(TextField) 的使用 | Stars-One的杂货小窝 本篇分别对常用的组件:图标(Ic ...

  8. 字体图标Icon Font

    字体图标Icon Font 前段时间研究怎样做字体图标,在网上查找诸多资料,诸多尝试,找到一套可以自己制作自己独立控制的制作流程,公司按照这套流程形成一套自己公司图标,本人目前所在公司已经在使用没有发 ...

  9. 如何在移动端app中应用字体图标icon fonts （转）

    原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral How to ...

  10. ExtJS 添加图标icon

    extjs控件有两个属性:一个是iconCls:另一个是icon.通过这两个属性可以对控件添加图标 1.直接引用图标路径 icon: '../icons/application_view_detail ...

随机推荐

  1. Delphi XE8中开发DataSnap程序常见问题和解决方法 （二）想对DBExpress的TSQLDataSet写对数据库操作的SQL语句出错了！

    当我们搞定DataSnap后,我们进入客户端程序开发阶段了,我们建立了客户端模块后,打算按照刚才开发服务器的步骤开发客户端程序,随后加入了DBExpress的TSQLDataSet,设定数据库连接后, ...

  2. git中文乱码问题

    控制台中输入:git config --global core.quotepath false

  3. 2、Numpy常用函数

    创建单位矩阵和读写文件使用eye()创建单位矩阵 # -*- coding: utf-8 -*- import numpy as np i = np.eye(3) print(i) 结果: [[ 1. ...

  4. undefined reference to symbol ‘_ZN2cv6String10deallocateEv

    使用qt编译Caffe时出现如下错误: undefined reference to symbol '_ZN2cv6String10deallocateEv' error adding symbols ...

  5. Jupyter Notebook 使用入门

    Jupyter Notebook 简介与安装 Jupyter Notebook 是一款开放源代码的 Web 应用程序,可让我们创建并共享代码和文档. 它提供了一个环境,你可以在其中记录代码,运行代码, ...

  6. php 替换 oracle 数据字段中“看不见”换行符号

    工作需要,把oracle中的数据导出csv,导出代码如下:<?php$file_name = "申請書承認(予定休出).csv";header("Content-D ...

  7. [PowerShell]HTML parsing -- get information from a website

    link: http://stackoverflow.com/questions/9053573/powershell-html-parsing-get-information-from-a-webs ...

  8. 【原创】elasticsearch入门

    示例 示例一: 示例二: 示例三: 示例四: ES介绍 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Ela ...

  9. Kibana6.x.x源码分析--启动时无反应分析

    今天执行启动命令后,不报错,但是也没有反应,一时不知道是什么原因造成的,后来经过分析发现,无意间删除了根目录下的一个文件夹plugins,重新创建上这个文件夹后,再次运行就OK了.

  10. HDOJ3085 Nightmare II 双向BFS

    重构一遍就A了...但这样效率太低了...莫非都要重构???QWQ 每一秒男同志bfs3层,女同志bfs1层.注意扩展状态时,要判一下合不合法再扩展,而不是只判扩展的状态合不合法,否则有可能由非法的走 ...