6、图标：icon

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";

}
时间： 2024-10-13 05:41:42

6、图标：icon的相关文章

再谈获取网站图标Icon

上一篇文章讨论了一下获取网站图标方法,是通过从根目录直接获取和html解析结合的方式来获取的,并给出了相应的代码示例.这一篇来讨论一个更现成的方法,这个方法是从360导航的页面发现的,在导航页面中点击添加网址,会弹出一个添加网址的对话框,点击126邮箱,可以看到126邮箱和图标就跑到上面去了.查看一下网络监控,可以看到Request URL是http://cdn.website.h.qhimg.com/index.php?domain=www.126.com,Request Method是GET

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

简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人修改补充+demo测试的形式,对expo进行一次大补血!欢迎加入expo兴趣学习交流群:597732981 [之前我写过一些列关于expo和rn入门配置的东i西,大家可以点击这里查看:从零学习rn开发] 相关文章: Expo大作战(一)--什么是expo,如何安装expo clinet和xde,xd

字体图标 Icon font

Icon font Icon font 指的是用字体文件取代图片文件,来展示图标.特殊字体等元素的方法. 应用场景: Icon Font的优缺点 大小可以自由地变化 颜色可以自由地修改 添加阴影效果 *IE6也可以支持 支持一些CSS3对文字的效果 字体文件比图片文件小很多 由于是字体,所以只可以显示纯色图片,不支持多种颜色的图片(缺点) 资源: 阿里icon font字库 这个是阿里妈妈M2UX的一个icon font字体图标字库,包含了淘宝图标库和阿里妈妈图标库. fontello 在线定制

HTML中用自定义字体实现小图标icon(不是原作, 只是一个研究笔记)

最近在做一个项目时, 研究了一下新浪微博的前端, 看到首页中那个图标了吗, 以前看到这类效果的第一反应就是用一个gif之类的图标做出来!! 但在研究的过程, 发现了一个小技巧, 注意那个em标签中的文本是E, 但显示出来一个类似ICON的图标. 既然是HTML+CSS写出来的, 那么应该是由css控制显示出来的效果的. 其他的一些css基本没什么问题, 都理解了, 但只有这个 font-family, 强制设置成了 "wbficonregular", 一般操作系统里应该没这个命名的字体

实现图标Icon+文字在div里自动中心居中（水平垂直居中）

已知div行高设置text-align:center文字会自动居中. 通过:before来设置icon的地址和高宽. 需要设置图片默认的垂直居中条件,与文字一致,为text-bottom. 设置图片行级显示. <!Doctype html><html><head><style>body{margin:0;padding:0;}.con{position:absolute;width:500px;height:50px;border:1px red solid

PyQt5Icon图标(Icon)无法显示问题

PyQt5中设置图标无法显示 以下源码来源PyQt5教程http://zetcode.com/gui/pyqt5/firstprograms/ 1 import sys 2 from PyQt5.QtWidgets import QApplication, QWidget 3 from PyQt5.QtGui import QIcon 4 5 class Example(QWidget): 6 7 def __init__(self): 8 super().__init__() 9 10 sel

[代码]如何在选择画面中显示图标(ICON)

只要将ICON的名字或ID传送到SELECTION-SCREEN COMMENT中,就可以在选择画面中显示ICON图标. ICON的ID和名字可以在type pool ICON中得到: &lt;img class="alignnone size-full wp-image-4979" src="http://www.baidusap.com/wp-content/uploads/2017-07-10_10-41-54.png" width="768

cnblogs博客园修改网站图标icon

比特虫,图片转换成ico图标 上传到博客园文件 修改网络地址即可 <script type="text/javascript" language="javascript"> //Setting ico for cnblogs var linkObject = document.createElement('link'); linkObject.rel = "shortcut icon"; linkObject.href = "

win_c的EXE添加和提取图标icon

1.首先去制作一张ICON: 使用各种图像编辑工具,限制:A.image.width == image.height;B.max_length = 256; 2.在visual stdio 2015工程项右键添加资源导入ICON格式,前提是你必须使用了图像库,而不是单纯的cmd,生成后就得到了 3.------------------------------------------------------------------------提取exe的ICON------------------

Html设置图标icon

html head添加: <link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/> 注意: 1.favicon.icon路径为根目录,但不限于根目录 2. href=&