ionicCSS09_颜色和图标

头部导入ionic.min.css

1.ionic颜色

1)ionic 提供了很多颜色的配置，当然你可以根据自己的需要自定义颜色。通常来说颜色意味着重写.

2)"我们更推崇让ionic提供一种推荐的命名约束来命名你的颜色, 样式, 主题等.

         工具类颜色被用来设置命名规约. 你可能会注意到ionic有意地不使用red或者blue这些词语. 取而代之的是通过使用描述情绪或通用主题的词语.

         回到现实, 设置颜色是最简单的一件事情, 不同的app对颜色有不同的要求. ionic的目标就是提供一套干净的系统用于建立在维护之上,又保持远离怎样使不同的app通过选择颜色的方式去自定义它的设计."

<div class="content">      <ul class="list ">        <li class="item dark">          light          <span class=" light-bg light-border"></span>        </li>        <li class="item stable-dark">          stable          <span class=" stable-bg stable-border"></span>        </li>        <li class="item positive">          positive          <span class="color-demo positive-bg positive-border"></span>        </li>        <li class="item calm">          calm          <span class="color-demo calm-bg calm-border"></span>        </li>        <li class="item balanced">          balanced          <span class="color-demo balanced-bg balanced-border"></span>        </li>        <li class="item energized">          energized          <span class="color-demo energized-bg energized-border"></span>        </li>        <li class="item assertive">          assertive          <span class="color-demo assertive-bg assertive-border"></span>        </li>        <li class="item royal">          royal          <span class="color-demo royal-bg royal-border"></span>        </li>        <li class="item dark">          dark          <span class="color-demo dark-bg dark-border"></span>        </li>      </ul></div>

2ionic图标

            ionic 也默认提供了许多的 图标，大概有500多个。用法也非常的简单：只需添加 icon 和Ionicon的类名即可, Ionicon可在Ionicons此查阅.

            图标样式CDN地址：http://www.runoob.com/static/ionic/css/ionicons.min.css。

用法实例

<ul><i class="icon ion-star"></i></ul>