ionic使用记录----色彩、图标、内边距

色彩

ionic定义了九种前景/背景/边框的色彩样式，：

可以在任何元素上使用这些样式设置前景和背景颜色：

 
 
<any class="positive-bg energized">
...
</any>

图标

ionic使用ionicons图标样式库。ionicons采用了TrueType字体实现图标样式，有超过500个图标可供选择。

使用图标很简单，在元素上声明以下两个CSS类即可：

• .icon - 将元素声明为图标
• .ion-{icon-name} - 声明要使用的具体图标

通常使用i元素定义图标，例如下面声明了元素显示ion-home图标：

 
 
<i class="icon ion-home"></i>

要了解有哪些图标及具体名称，需要访问ionics.com。点击某个图标即可查看其CSS类名称。

可以在任何元素中插入图标，使用元素的font-size样式指定图标的大小：

 
 
<any style="font-size:100px;">
    <i class="icon ion-search"></i>
</any>

内边距

ionic定义了常用的内边距样式：

样式名很直白，边距统一为10px。可以在任何元素上应用这些样式。