Embed Size (px)
Citation preview
BataSoft
Font-Awesome App IconsVersion 2.0 - what's new
built for Appcelerator Open Mobile Marketplace
OverviewAn indispensible module for rapid mobile application development on Appcelerator.
487 vector-based, commonly used icons in one true-type font and easy-to-use package. Icons can bescaled and styled by font attributes without loss of quality at any size.
Icons are completely free for commercial use. See the licence.
Features and Benefits Time-saving
Fast development cycle - no need to go back to image program to resize icon or change icon color. Simplychanging the font attributes will do the job.
High quality
Overview Features Installation Icons Licence & HistorySample Codes
Font is vector-based. Icons are scalable without losing quality at any size. Works on both regular and retinadisplays.
Money-saving
Download once and use in as many projects as you want.
Multi-platforms
Works beautifully on both iOS and Android platforms.
Plenty of samples
Plenty of sample codes are provided for inspiration.
A utility function is provided to convert font into icon image at any size for UI elements where image isrequired.
InstallationTitanium1. Download the package from Appcelerator Marketplace (link pending confirmation).2. Unzip the downloaded package. Copy the icons.js file into your project Resources directory.3. Follow the instructions from Appcelerator to install icon font AppIcons.ttf4. Include icons.js module into your project.
Titanium Alloy1. The existing custom font installation instructions from Appcelerator to copy the font file to the
Resources/fonts/ directory won't work for Alloy. The font file AppIcons.ttf should be copied to thedirectory app/assets/fonts/ instead. It will be copied to the Resources directory automatically duringrebuild.
2. For iOS, the extra step (modifying Info.plist) in the existing custom font installation instructions is stillrequired to get the custom font working.
3. Copy the module file icons.js to the app/assets/ directory. It will be copied to the Resources/directory automatically during rebuild.
You are all set to to go. To use the icon simply put icons.icon_name in places where string is expected. Seethe following sample codes for inspiration.
Next
In places where icon image is required, a simple function is provided below to convert the icon from fonttext into image.
Sample CodesApp Icons Font in Creative UIA creative use of App Icons:
var win = Ti.UI.createWindow({backgroundImage:'/background.jpg'});
[ {index:0, icon: icons.cog, text: 'SETTINGS'}, {index:1, icon: icons.search, text: 'SEARCH' }, {index:2, icon: icons.shopping_cart, text: 'STORE' }, {index:3, icon: icons.camera, text: 'CAMERA' }
].forEach(function(item){ win.add (Ti.UI.createLabel({ text: ' ' + item.icon + ' ' + item.text, font: {fontFamily: 'AppIcons', fontSize:'24dp' }, color: '#fff', backgroundColor: '#444', left: 0, right: '20%', top: (item.index*70 + 30) + 'dp', height: '60dp', opacity: 0.9 }) );});
win.open();
Screen Shots
On iOS:
On Android:
NextApp Icons Font in Google + Style UIUsing App Icons to create Google+ style UI:
var dFactor = (Ti.Platform.displayCaps.logicalDensityFactor ? Ti.Platform.displayCaps.logicalDensityFactor : 1);
var win = Ti.UI.createWindow({backgroundColor: '#d8d8d8'});
// bottom barvar funcBar = Ti.UI.createView({ backgroundColor:'#111', left: 0, bottom: 0, height: '42dp', width: '100%'
});
[ {index: 0, text: icons.camera + ' Photo', color: '#4682EA'}, {index: 1, text: icons.link + ' Link', color: '#F2B32A'}, {index: 2, text: icons.pencil + ' Write', color: '#56A845'}
].forEach(function(item){ funcBar.add( Ti.UI.createLabel( { text: item.text, color: item.color, font: {fontFamily: 'AppIcons', fontSize:'18dp' }, center: {x:(item.index*33.33+16.67)+'%', y:'50%'} }) );});win.add(funcBar);
// top barvar topBar = Ti.UI.createView({ backgroundColor:'#fff', left: 0, top: 0, height: '45dp', width: '100%' });
topBar.add ( Ti.UI.createLabel({ text: icons.x_mark, color: '#888', left: '10dp', top: '10dp', font: {fontFamily: 'AppIcons', fontSize:'24dp' } }));topBar.add ( Ti.UI.createLabel({ text: icons.tick, color: '#888', right: '10dp', top: '10dp', font: {fontFamily: 'AppIcons', fontSize:'24dp' } }));win.add(topBar);
// middle boxeswin.add ( Ti.UI.createLabel({ text: ' ' + icons.user + ' User', color: '#4682EA', left: '5dp', right: '5dp', top: '50dp', height: '40dp', font: {fontFamily: 'AppIcons', fontSize:'24dp' }, backgroundColor: '#fff', borderRadius: 4 * dFactor }));win.add ( Ti.UI.createLabel({ text: ' ' + icons.map_marker + ' Location', color: '#DB4C3F', left: '5dp', right: '5dp', top: '95dp', height: '40dp', font: {fontFamily: 'AppIcons', fontSize:'24dp' }, backgroundColor: '#fff', borderRadius: 4 * dFactor }));
// icon buttons[ {index: 0, title: icons.camera, bgColor: '#4682EA'}, {index: 1, title: icons.picture, bgColor: '#F2B32A'}, {index: 2, title: icons.stopwatch, bgColor: '#DB4C3F'}, {index: 3, title: icons.tag, bgColor: '#56A845'}, {index: 4, title: icons.thumbs_up_alt, bgColor: '#DB51C2'}
].forEach(function(item){ win.add ( Ti.UI.createButton({ title: item.title, backgroundColor:item.bgColor, font: {fontFamily: 'AppIcons', fontSize:'24dp' }, color: 'white', backgroundImage: 'NONE', borderRadius: 4 * dFactor, borderWidth: 0, height: '46dp', width: '46dp', top: '150dp', left: (item.index*56+10)+'dp' }));});
win.open();
Screen Shots
On iOS:
On Android:
Next
App Icons Font in Label as BackgroundA simple demo program using App Icons in the label as window background. This example shows scaling upthe icon font won't lose its quality.
var icons = require('/ui/icons');var win = Ti.UI.createWindow({backgroundColor:'#A6061A'});
win.add( Ti.UI.createLabel( { text: icons.smile, font: { fontFamily: 'AppIcons', fontSize: Ti.Platform.displayCaps.platformWidth * 0.8 }, color: '#96000A', center: {x:'50%', y:'63%'} }));
[ {index:0, icon: icons.food, text: 'Restaurants'}, {index:1, icon: icons.coffee, text: 'Coffee' }, {index:2, icon: icons.glass, text: 'Bars' }
].forEach(function(item){ win.add (Ti.UI.createLabel({ text: ' ' + item.icon + ' ' + item.text, font: {fontFamily: 'AppIcons', fontSize:'18dp' }, color: '#fff', backgroundColor: '#96000A', left: '35%', right: 0, height: '36dp', top: (item.index*37 + 20) + 'dp' }) );});
win.open();
Screen Shots
On iOS:
On Android:
Next
Creating Icon Image from App Icons FontApp Icons font works well where text is expected (e.g. title and text fields). However, some UI elementsrequire icon image (see examples below). The following sample code creates an icon image from the AppIcons font and stores it in the application storage area.
The function can be easily extended to create icon image with background color and border.
Next
var icons = require('/ui/icons');
function createIconFile (iconName, imgSize, imgColor) {
imgColor = imgColor || 'white';
var // e.g. fileName : icon-edit-30-white.png fileName = 'icon-' + iconName + '-' + imgSize + '-' + imgColor + '.png', file = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, fileName);
if (!file.exists()) { var iconLabel = Ti.UI.createLabel({ font: { fontFamily: 'AppIcons', fontSize: (imgSize * 0.8) + 'dp', fontWeight: 'normal' }, color: imgColor, backgroundColor:'transparent', height: imgSize + 'dp', width: imgSize + 'dp', text: icons[iconName], textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER, verticalAlign: Ti.UI.TEXT_VERTICAL_ALIGNMENT_CENTER }); var blob = iconLabel.toImage();
if (blob.media) blob=blob.media; // fix for Android
file.write(blob); }
return file.nativePath;},
Icon Image in Tabs / Tab GroupThe following sample code demonstrates using the icon images created by createIconFile() in tabs / tabgroup.
var iSize = (Ti.Platform.osname === 'android' ? 72 : 36);
var tabGroup = Ti.UI.createTabGroup();
[ {index: 0, icon: 'time', title: 'Recent' }, {index: 1, icon: 'edit', title: 'Edit' }, {index: 2, icon: 'dashboard', title: 'Dashboard'}, {index: 3, icon: 'cog', title: 'Setup' }
].forEach(function(item){ var icon = createIconFile(item.icon, iSize), win = Ti.UI.createWindow({title: item.title, backgroundColor: '#eee'}), tab = Ti.UI.createTab({icon: icon, title: item.title, window: win});
if (!item.index) // The first tab { [ {index: 0, icon: icons.envelope_alt, color: '#AD000C', title: 'Mail'}, {index: 1, icon: icons.voice_mail, color: '#1C7EE0', title: 'Voice Mail'}, {index: 2, icon: icons.star, color: '#00C173', title: 'Rating'}, {index: 3, icon: icons.archive, color: '#FCAB23', title: 'Backup'}
].forEach(function(sitem) { var bgView = Ti.UI.createView({ backgroundColor: '#fff', left: '10%', right: '10%', height: '60dp', top: (sitem.index*62 + 30) + 'dp'});
bgView.add(Ti.UI.createLabel({ text: sitem.icon, font: {fontFamily: 'AppIcons', fontSize:'32dp'}, color: sitem.color, left: '10dp' })); bgView.add(Ti.UI.createLabel({ text: sitem.title, font: {fontSize:'20dp'}, color: 'black', left: '60dp' })); bgView.add(Ti.UI.createLabel({ text: icons.chevron_right, font: {fontFamily: 'AppIcons', fontSize:'24dp'}, color: '#aaa', right: '10dp' }));
win.add(bgView); }); }
tabGroup.addTab(tab);});
// open tab grouptabGroup.open();
Screen Shots
On iOS:
On Android:
Next
Icon Image in Dashboard View (iOS)The following sample code shows how to use the icon images created by createIconFile() in dashboardview.
var win = Ti.UI.createWindow({ backgroundImage: '/dark_pattern.png', backgroundRepeat: true });var label = Ti.UI.createLabel({ color: 'white', font: { fontSize: 16 }, text: 'App Icons Images in Dashboard View', textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER, top: 10, height: 40, width: 300 });
win.add(label);
var iSize = 72, dashboardData = [];
[ { icon: createIconFile('home', iSize), badge: 10 }, { icon: createIconFile('phone', iSize), badge: 2 }, { icon: createIconFile('calendar', iSize), badge: 2 }, { icon: createIconFile('tasks', iSize), badge: 5 }, { icon: createIconFile('inbox', iSize), badge: 126 }, { icon: createIconFile('user', iSize), badge: 3 }, { icon: createIconFile('camera', iSize, '#999') }, { icon: createIconFile('microphone', iSize, '#999') }, { icon: createIconFile('signout', iSize, '#AD000C') }
].forEach( function(item){ dashboardData.push( Ti.UI.createDashboardItem({ badge: item.badge, image: item.icon }) );});
var dashboard = Ti.UI.createDashboardView({ data: dashboardData, wobble: true, top: 70 });
win.add(dashboard);win.open();
Screen Shots
Next
On iOS:
On Android:
Dashboard View is iOS specific UI.
Icon Image in Button Bar (iOS)The following sample code uses the icon images created by createIconFile() in the button bar.
var icon1 = createIconFile('camera', 24), icon2 = createIconFile('facetime_video', 24), icon3 = createIconFile('search', 24), icon4 = createIconFile('share_alt2', 24);
var win = Ti.UI.createWindow({backgroundColor:'#eee'});
win.add (Ti.UI.createButtonBar({ labels:[{image: icon1}, {image: icon2}, {image: icon3}, {image: icon4} ], backgroundColor:'#336699', style:Ti.UI.iPhone.SystemButtonStyle.BAR, top:20, height:32, width:'80%' }));win.add (Ti.UI.createImageView({ image: '/StPeter.jpg', borderWidth: 0, borderRadius: 8, width: '80%', top: 64}));
[ {index: 0, color: '#F20010', icon: icons.map}, {index: 1, color: '#1C7EE0', icon: icons.map_marker}, {index: 2, color: '#00B36A', icon: icons.direction}, {index: 3, color: '#FCAB23', icon: icons.star}
].forEach(function(item){ win.add (Ti.UI.createLabel({ backgroundColor: '#333', color: item.color, borderWidth: 0, borderRadius: 8, text: item.icon, font: {fontFamily: 'AppIcons', fontSize:'24dp'}, width: 50, height: 50, bottom: 16, left: item.index*64+40, textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER }));});
win.open();
Screen Shots
On iOS:
On Android:
Button Bar is iOS specific UI.
Using App Icons in Alloy1. Add the following line in /app/alloy.js so that the variable 'icons' will be available globally.
var icons = require('/icons');
2. In the Alloy style sheet (e.g. index.tss), add the font definition to the element that uses App Icons, e.g.
"Label": { width: Ti.UI.SIZE, height: Ti.UI.SIZE, color: "#000", font: {fontFamily: 'AppIcons', fontSize:'14pt' }}
3. Assuming in the Alloy markup (e.g. index.xml), you have the following label definition:
by Category Alphabetical New Icons
Application Equipment Transportation Directional Editor Player Brand Weather
Currency Medical
Full Screen
<Alloy> <Window class="container"> <Label id="label"></Label> </Window></Alloy>
To use the App Icons in the label, set the 'text' property in the controller (e.g. index.js) as follows:
$.label.text = icons.rss + ' RSS Feed';
App icons cannot be used directly in the markup file like <Label>icons.rss Test</Label>. It has to beset in the controller.
IconsList of all icons and their names defined in the icons.js module:
A p p l i c a t i o n I c o n s ( 2 6 5 + 1 0 )
adjust
air
alarm_clock
anchor
archive
asterisk
ban_circle
bar_chart
bar_chart_alt
barcode
beaker
beer
bell
bell_alt
bolt
book
book_alt
bookmark
bookmark_empty
brick_wall
briefcase
brush
bucket
bug
building
bullhorn
bullseye
bullseye_alt
calendar
calendar_empty
certificate
check
check_empty
check_minus
check_sign
circle
circle_blank
clapper
cloud
cloud_alt
cloud_download
cloud_upload
code
code_fork
coffee
cog
cogs
collapse
collapse_alt
collapse_top
comment
comment_alt
comment_square
comments
comments_alt
comments_square
compass
computer_network
credit_card
crop
cup
dashboard
database
direction
dot
download
download_alt
download_alt2
droplet
edit
edit_alt
edit_sign
ellipsis_horizontal
ellipsis_vertical
envelope
envelope_alt
eraser
exchange
exclamation
exclamation_sign
expand
expand_alt
external_link
external_link_sign
eye_close
eye_open
facetime_video
female
file_cabinet
film
filter
fire
fire_alt
fire_extinguisher
flag
flag_alt
flag_checkered
flashlight
flow_branch
flow_cascade
flow_line
flow_parallel
flow_tree
folder_close
folder_close_alt
folder_open
folder_open_alt
food
frown
gift
glass
globe
globe_alt
graduation_cap
group
group_alt
guage
guage_alt
heart
heart_empty
home
hourglass
inbox
infinity
info
info_sign
key
leaf
legal
lemon
lemon_alt
level_down
level_up
lifebuoy
light_adjust
light_down
light_up
lightbulb
lightbulb_alt
line_chart
line_chart_alt
location_arrow
lock
magic
magnet
magnet_alt
mail_forward (alias)
mail_reply (alias)
mail_reply_all (alias)
male
map
map_marker
megaphone
meh
minus
minus_sign
minus_sign_alt
money
move
music
off
ok
ok_circle
ok_sign
palette
paper_plane
pencil
pencil_alt
picture
pie_chart
plus
plus_sign
plus_sign_alt
podcast
power_off (alias)
pushpin
pushpin_alt
puzzle_piece
qrcode
question
question_sign
quote_left
quote_right
random
refresh
remove
remove_circle
remove_sign
reorder
reply
reply_all
resize_horizontal
resize_vertical
retweet
rotate_left (alias)
rotate_right (alias)
rss
rss_sign
screenshot
search
search_alt
share
share_alt
share_alt2
share_sign
shareable
shield
shopping_cart
sign_blank
signal
signin
signout
signpost
sitemap
smile
sort
sort_by_alphabet
sort_by_alphabet_alt
sort_by_attributes
sort_by_attributes_alt
sort_by_order
sort_by_order_alt
sort_down
sort_up
spinner
star
star_empty
star_half
star_half_empty
star_half_full (alias)
stopwatch
suitcase
tag
tag_alt
tags
tasks
terminal
thermometer
three_dots
thumbs_down
thumbs_down_alt
thumbs_up
thumbs_up_alt
thunder
tick (alias)
ticket
time
tint
tools
trash
Top
trash_alt
trophy
two_dots
umbrella
unchecked (alias)
unlock
unlock_alt
upload
upload_alt
upload_alt2
user
vcard
voice_mail
volume_down
volume_off
volume_up
warning_sign
water
weight
wifi
wrench
x_mark (alias)
zoom_in
zoom_out
E q u i p m e n t I c o n s ( 2 1 )
Top
calculator
camcorder
camera
camera_retro
desktop
gamepad
hdd
headphones
keyboard
laptop
laptop_mobile_phone
microphone
microphone_off
mobile_phone
phone
phone_sign
print_alt
radio
tablet
tv
Tr a n s p o r t a t i o n I c o n s ( 1 6 )
ambulance
Top
bicycle
bike_sign
bus_sign
car
car_sign
fighter_jet
handicap_sign
motorbike
plane
road
rocket
taxi_sign
truck
truck_long
truck_sign
D i r e c t i o n a l I c o n s ( 3 6 )
angle_down
angle_left
angle_right
angle_up
arrow_down
arrow_left
arrow_right
arrow_up
caret_down
caret_left
caret_right
caret_up
chevron_down
chevron_left
chevron_right
chevron_up
chevron_sign_down
chevron_sign_left
chevron_sign_right
chevron_sign_up
circle_arrow_down
circle_arrow_left
circle_arrow_right
circle_arrow_up
double_angle_down
double_angle_left
double_angle_right
double_angle_up
hand_down
hand_left
hand_right
hand_up
long_arrow_down
long_arrow_left
Top
long_arrow_right
long_arrow_up
E d i t o r I c o n s ( 4 2 + 2 )
align_center
align_justify
align_left
align_right
bold
columns
copy
cut
eraser
file
file_alt
file_text
file_text_alt
font
indent_left
indent_left_alt
indent_right
indent_right_alt
italic
link
link_alt
list
Top
list_alt
list_ol
list_ul
paper_clip
paste
repeat
rotate_left (alias)
rotate_right (alias)
save
save_alt
strikethrough
subscript
superscript
table
text_height
text_width
th
th_large
th_list
underline
undo
unlink
P l a y e r I c o n s ( 1 5 )
fullscreen
backward
Top
eject
fast_backward
fast_forward
forward
pause
play
step_backward
step_forward
stop
play_circle
play_sign
resize_full
resize_small
B r a n d I c o n s ( 7 3 )
All brand icons are trademarks of their respective owners.
adn
amazon
amazon_sign
android
apple
bitbucket
bitbucket_sign
blogger
blogger_sign
btc
css3
delicious_sign
dribble
dropbox
evernote
evernote_sign
facebook_sign
flickr
flickr_sign
foursquare
git_fork
github
github_alt
github_alt2
github_sign
gittip
google_plus
google_plus_sign
google_sign
hacker_news
html5
js_fiddle
lastfm
lastfm_sign
linkedin_sign
linux
maxcdn
picasa
picasa_sign
pinterest_sign
renren
skype
soundcloud
spotify
stackexchange
trello
tumblr
tumblr_sign
twitter_sign
vimeo
vimeo_sign
vk
windows
windows_8
Top
Top
wordpress
wordpress_sign
xing_sign
yahoo
yahoo_sign
yelp
yelp_sign
youtube
youtube_play
youtube_sign
We a t h e r I c o n s ( 9 + 1 )
cloudy
moon
partly_cloudy (alias)
partly_sunny
rainy
snow
snowy
sun
sunny
thundery
C u r r e n c y I c o n s ( 8 )
Top
btc
cny
eur
gbp
inr
jpy
krw
usd
M e d i c a l I c o n s ( 8 )
ambulance
beaker
h_sign
hospital
medkit
plus_sign
stethoscope
user_md
Version History2.0 latest
Greatly improved metrics :-
better vertical centering for easy alignment with other UI elementsremoval of extra right padding on iOS
More and better sample codesAddition of 233 new icons (with metrics optimalized for mobile) from :-
Font Awesome 3.2.0Sosa icon fontHeydings IconsPulsarJS @FontFaceEntypo
Change of font licence from CC BY 3.0 to SIL OFL 1.1 (no practical impact to using this module)Icon changes :-
in v1.0 in v2.0
apple_logo apple -
cloud cloud_alt cloud
download_alt download_alt2 download_alt
edit edit_alt edit
file file_text file
fire fire_alt fire
github github_alt2 github
group group_alt group
indent_left indent_left_alt indent_left
indent_right indent_right_alt indent_right
lemon lemon_alt lemon
link link_alt link
pencil pencil_alt pencil
print print_alt print
pushpin pushpin_alt pushpin
save save_alt save
search search_alt search
trash trash_alt trash
upload_alt upload_alt2 upload_alt
youtube youtube_play youtube
1.0First release
Based on Font Awesome More 2.0 icons.
Licence / CreditsFont is licensed under SIL OFL 1.1 for commercial use.
This work was inspired by Bootstrap & Font Awesome.
© 2013 BataSoft Inc., all rights reserved.
