Here is a tip on how to use the 90+ built in Sencha Touch icons in AwareIM mobile applications. Included in the Sencha touch platform is a set of 90+ icons and it´s an easy config to start using these in AwareIM mobile applications. NB: Sencha Touch also has another set of 200+ icons included in the platform and configuring these are probably also quite easy but I have found this 90+ icons pack to be quite good and covering most use scenarios.
1. Decide which icon you want to use from this site: http://pictos.cc/font/ and write down the letter of the icon you want to use. In this example i´m going to use the "Information" icon so I write down the letter "i" (lower case).
2. Decide which theme you want to use for example "Sencha Touch" theme (this fix works on all mobile themes and the icons are adapted to the theme so they look good in every theme.
3. Open the css file of the theme you want to use (from folder: "C:\AwareIM\Tomcat\webapps\AwareIM\sencha-touch-2.3.1\resources\css\"). In this example I am using the "Sencha Touch" theme and the file i´m changing is: "C:\AwareIM\Tomcat\webapps\AwareIM\sencha-touch-2.3.1\resources\css\sencha-touch.css"
4. Add the following to the theme css file (in this example again I ´m using the Sencha Touch theme so the file to add to is "sencha-touch.css". This code segment represents 1 icon and you need to add 1 of these segments per icon and there are 2 things you need to change per icon. 1) Change the "class name" in this example, this is where it currently says "myicon" (both lines), change this to a name of your choosing. 2) Change the "content" line to a letter representing the icon you want to use (in this example "i"). NB: This is a temporary fix and the ideal would be to minimize the code below
and add it then in the css file so this code below also is integrated in the 1 line of code.
.x-tab .x-button-icon.myicon:before,
.x-button .x-button-icon.myicon:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
font-family: "Pictos";
content: "i";
}
5. Go to your menu tab / tab section and type in "myicon" in the class name attribute.
6. Reload mobile app.
Here is an example of how it can look using the Sencha Touch theme:
