Icon Font Support - grantges/alloy-bootstrap GitHub Wiki

alloy-bootstrap provides built-in support for leveraging font based icons through out your application. Font icons have a significant advantage over images in mobile in that they are:

  • Extremely light weight 400+ icons is only 186Kb
  • Can scale in size without any quality loss and work great across any screen density
  • Can be colored to any color and opacity very easily

How to leverage the font icons in your app

Font Icons can be used with any Ti.UI element that supports text.

  • Ti.UI.Label
  • Ti.UI.Button
  • Ti.UI.TextField
  • Ti.UI.TextArea
  • ?? missing some ??

There are several ways to leverage these icons at dev time and run time.

Using font icons in your Alloy Views

To leverage the icons inside of a View, use the icon and icon-* classes found at the bottom of the app.tss file.

Here is a quick example of using an icon with a Ti.UI.Label:

<Alloy>
  <View id="container" class="hgroup size">
    <Label class="icon icon-rocket" /><Label class="h3 left-buffer">I love Alloy Bootstrap!</Label>
  </View>
</Alloy>

I am using a service called Icomoon.io to package the FontAwesome and Meteocons icon set for distribution. If you would like to create your own library for use with alloy-bootstrap, you can leverage this service to generate an updated font library. Then just follow the naming conventions found in the themes/bootstrap/styles/app.tss file.

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️