ionic .item : 嵌入图标列表成员的内容中插入图标，比单纯的文字更加生动： 
要插入图标，需要满足两个条件： 在.item元素上声明图标位置。图标可以位于列表的左侧或右侧， 分别使用.item-icon-left和.item-icon-right声明 在.item元素内插入图标。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<link rel="stylesheet" type="text/css" href="ionic.min.css">
</head>
<body>
<div class="bar bar-header bar-positive">
<button class="button icon ion-ios-arrow-left">返回</button>
<h1 class="title">酒店搜索</h1>
<button class="button">首页</button>
</div>
<div class="scroll-content has-header">
<div class="list list-inset">
<div class="item item-icon-left item-icon-right">
<i class="icon ion-location"></i>
<h2>入住城市：当前位置</h2>
<i class="icon ion-ios-arrow-right"></i>
</div>
<div class="item item-icon-left item-icon-right">
<i class="icon ion-calendar"></i>
<h2>入住日期：7月27日 星期五</h2>
<i class="icon ion-ios-arrow-right"></i>
</div>
<div class="item item-icon-left item-icon-right">
<i class="icon ion-social-yen"></i>
<h2>价格范围：不限价格</h2>
<i class="icon ion-ios-arrow-right"></i>
</div>
</div>
<div class="padding">
<button class="button button-block button-assertive">搜索</button>
</div>
</div>
</body>
</html>
|