mattmcfarland / com.mattmcfarland.fontawesome Goto Github PK

Using kr.yostudio.drawer widget, I tried nesting this widget in various places but the icon doesn't display. Any ideas?

<Widget src="kr.yostudio.drawer" id="drawerWidget">
        <View class="menuWrap" role="leftView" id="leftMenu">
            ...
        </View>
        <Window platform="ios" role="centerWindow" title="">
            ...
        </Window>
        <Window platform="android" role="centerWindow" id="centerWindow">
            <ActionBar onHomeIconItemSelected="onMenuButtonClick" title=" " ></ActionBar>
            <Menu>
                <MenuItem id="notifications" title="" icon="fa-bell-o" showAsAction="Ti.Android.SHOW_AS_ACTION_ALWAYS" />
                ...
            </Menu>
            <Require src="dashboard" id="dashboard" />
            <Widget id="fa" src="com.mattmcfarland.fontawesome" />
        </Window>
    </Widget>

I have a <Button> with an icon property set, renders just fine.

But when I call the $.fa.change() method on it to change the icon, the new icon gets appended to the button (so now there are 2 icons) instead of replacing the original icon.

If I use a <Label> element instead, then it works perfectly.

Hi !

I have an issue when setting the icon on a RightNavButton of a TabView.
It always shows the same "help" icon regardless of the icon name I gave.

Here's the code:

<Alloy>
    <Tab id="tab_places" title="Points de vente">
        <Window id="tab_places_window" title="Stores" layout="horizontal">
            <RightNavButton>
                <Button icon="fa-times" onClick="geocodeAndSortList"/>
            </RightNavButton>
            <Require src="places/list" />
            <Widget instaParse="false" id="fa" src="com.mattmcfarland.fontawesome" />
        </Window>
    </Tab>
</Alloy>

The issue is on this button:

<Button icon="fa-times" onClick="geocodeAndSortList"/>

Any idea ?

Can't figure out font sizing syntax - nothing that affects normal label text seems to affect the FA icons. Can you provide an example?

I've updated the widget and i've copied the new ttf file into assets/fonts. But the new icons don't show up. Not sure if I'm missing something. Other icons work fine. Not tested on iOS.

I think there is a bug when trying to remove the icon for buttons.

In controllers/widget.js, line 282:

if (tag.title) tag.text = removeChars(tag.title);

should be

if (tag.title) tag.title = removeChars(tag.title);

Awesome widget, thanks for sharing!

I have not been successful in changing fa icons on click. Can anyone help me determine how I can change the icons for the buttons in the table rows?

$.table.addEventListener('click',function(e){
    if(e.source.toString() == '[object TiUIButton]') {
        if(e.source.icon=='fa-star-o') {
            $.fa.change(e.source,'fa-star');
        }
        if(e.source.icon=='fa-star') {
            $.fa.change(e.source,'fa-star-o');
        }
    }
});

How can I use icons for my TabGroups? There isn't a window or view element for me to place the wide inside of and I can't see any icons.

<Alloy>
    <TabGroup backgroundColor="white" id="tabGroup">
        <Tab id="tab1" title="Home" icon="KS_nav_views.png">
            <Require src="dashboard"/>
        </Tab>
        <Tab id="agendaTab" title="Agenda" icon="fa-car">
            <Require src="agenda"/>
        </Tab>
        <Tab id="tab2" title="My Schedule" icon="KS_nav_views.png">
            <Window id="win2" title="Tab 2">
                <Label id="label2" color="#999">My Schedule</Label>
            </Window>
        </Tab>
        <Tab id="tab3" title="Breakouts" icon="KS_nav_views.png">
            <Require src="agenda"/>
        </Tab>
        <Tab id="tab4" title="More" icon="KS_nav_views.png">
            <Require src="more"/>
        </Tab>
    </TabGroup>
    <Widget id="fa" src="com.mattmcfarland.fontawesome"/>
</Alloy>
`

Hello,

May thanks for this great contribution.

In my user profile i have a couple of static icons that i use like this:

<Label icon="fa-user" class="profileIcons" id="userSmilies" text=""/>

Is there a way to dynamically populate the text/title of the static icon so that the static icons shows up next (and not instead) to the dynamic text? id like to keep the app slim (there are around 10 fields i need to populate)

when i set the datavalue (get it from a REST server) it overrides the label (rather then showing up next to it):

$.userSmilies.setText(userObject.field_smilies_dec.und[0].value);

iv also tried to use the title property of the label, but it doesnt work.

any ideas?

The file FontAwesome.ttf should be placed in the /app/assets/fonts directory for iOS

Attempting to use in a TabGroup - I've added the widget as the last item after the require in the window tag, specified an icon for the tab - doesn't work.

The icon are not showing windows 81 emulator and phone

<View class="textFieldRow">
    <Label icon="fa-user" class="textFieldIcon"/>
      <View class="vgroup size left">
            <TextField id="username" class="span-width" hintText="L('hint_user_name')" ></TextField>
          <Label class="textFieldIcon" id="errorUsername" class="error-text left field-error hidden" text="L('error_enter_user_name')"></Label>
              </View>
</View>

".textFieldIcon":{   
    color:"#808080",
    left:0,
    font:{
        iconFontSize:18
    }
}

It show a square in place of icon, but same code working on Android.

Hi,

When I do a build through Command Line the icons show up without any issue. It shows the web defaults if i use ti build -p ios --shadow however.

Is there a setting I have to set for it to work with shadow

Thanks,
Victor

Can I control the icon property from controller? Such as..

//View
< Label id="row" >

//Controller
$.row.icon = 'fa-file'

How can we add to your existing icons.js CharMap?
Can't seem to import new Icons/CharCode...

Where can I find the character values (ex. 61683 for fa-bell)?

I tried both in my app and your "Working Example". On Android, it's all good, but on iOS, all icons becomes the default icon. What could be the cause?

Hi,

Sorry for the amateurism, but I wasn't able to work out how to use the font-awesome icon as the tab button. Where do I put:

<Widget id="fa" src="com.mattmcfarland.fontawesome"/>
in:

<Alloy>
    <TabGroup>
        <Tab title="Feed" icon="fa-search">
            <Window title="Feed">
                <Label>I am Window 1</Label>
            </Window>
        </Tab>
        <Tab title="Categorias" icon="KS_nav_views.png">
            <Window title="Categorias">
                <Label>I am Window 2</Label>
            </Window>
        </Tab>
    </TabGroup>
</Alloy>

?

".actionButton": {
    color: '#fff',
    backgroundColor: "#329A35",
    borderRadius: 5,
    width: "125dp",
    height: "40dp",
    top: "20dp",
    font:{
        fontSize: "14dp",
    }
}

<Button title="Login" class="actionButton" icon="fa-unlock-alt"/>

The only change I made between the two images is removing the icon="fa-unlock-alt" from the button. I've tried changing things around in the actionButton class but the 'g' keeps getting partially cut off on iOS. Android appears to be fine. Anyone have any ideas?

I'm using Titanium SDK 4.0.0 GA with Appcelerator 4.0.1.201506021908.

I have an icon showing in a view, say detail.xml, but no matter how I change the fontSize of the related class in detail.tss, the icon size remain unchanged. Changing the icon is fine though.

Having tried almost all combinations. I finally swapped the content of detail.xml with your browse_icon.html and detail.tss with your app.tss. Strangely enough, all icon sizes are the same as my previous test and can't change. Changing icon color in the .tss of fa-icon works though.

So, what could be the possible cause? Is it possible that the parent window affects the rendering of child window?

By the way, though size can't change, the code runs ok in iOS simulator. But I got the following error message by running from Android Emulator:

[ERROR] :  TiExceptionHandler: (main) [8,8170] ----- Titanium Javascript Runtime Error -----
[ERROR] :  TiExceptionHandler: (main) [0,8170] - In alloy/widgets/com.mattmcfarland.fontawesome/controllers/widget.js:11,59
[ERROR] :  TiExceptionHandler: (main) [0,8170] - Message: Uncaught Error: Java Exception occurred
[ERROR] :  TiExceptionHandler: (main) [0,8170] - Source:                 for (var property in tag) Ti.API.debug(tag[property]);
[ERROR] :  V8Exception: Exception occurred at alloy/widgets/com.mattmcfarland.fontawesome/controllers/widget.js:11: Uncaught Error
: Java Exception occurred

Perhaps if I turned the label into an IMAGE somewhere before the NavigationWindow and then just used it as a raw img?
Dunno, I just wanna use fontawesome REALLY bad.

Can you post an example, how to use this widget with right or left Navbuttons generated in the controller?

I have something like this:

I could only display the string "S", if it's blank, it's blank, no icon is displayed. Any hint?
Is there a working example for ListView?

Do you know what could be the reason?

Tested with 3.4.0.GA on Nexus 5 with Android 4.4.4

[ERROR] :  TiExceptionHandler: (main) [6416,6416] ----- Titanium Javascript Runtime Error -----
[ERROR] :  TiExceptionHandler: (main) [0,6416] - In alloy/widgets/com.mattmcfarland.fontawesome/controllers/widget.js:18,29
[ERROR] :  TiExceptionHandler: (main) [1,6417] - Message: Uncaught RangeError: Maximum call stack size exceeded
[ERROR] :  TiExceptionHandler: (main) [0,6417] - Source:         function updateIcons(children) {
[ERROR] :  V8Exception: Exception occurred at alloy/widgets/com.mattmcfarland.fontawesome/controllers/widget.js:18: Uncaught RangeError: Maximum call stack size exceeded
[ERROR] :  V8Exception: RangeError: Maximum call stack size exceeded

It works when I add the widget to the window. But I need to separate a view into another controller. So I added the widget to the view of the new controller which I require in that first window.

fonts will not show if they share the same label as text. (like a button with text) - fonts do show however if they are tied to a label button without text. see screenshot:

Still can't figure it out, been spending all day on it.

Tried many, many, many different things.

Not sure how to confirm it is getting the file or not.

I've followed the instructions as per the GitHub repo.

Copied com.mattmcfarland.fontawesome to app/widgets/
Added dependencies to config.json

Invoking Alloy.createWidget('com.mattmcfarland.fontawesome'); produces the following error:

[ERROR] :      line = 23;
[ERROR] :      message = "'undefined' is not an object (evaluating 'tag[\"icon\"]')";
[ERROR] :      name = TypeError;
[ERROR] :      sourceId = 261004544;
[ERROR] :      sourceURL = "/alloy/widgets/com.mattmcfarland.fontawesome/controllers/widget.js";

(removed several lines for privacy's sake...)

Hi, I'm just starting out as an Alloy developer, but I would like to do something similar to:

and I am getting error:

Exception occurred at alloy/widgets/com.mattmcfarland.fontawesome/controllers/widget.js:13: Uncaught TypeError: Cannot read property 'icon' of undefined.

I've followed the installation instructions verbatim, so I don't really know what's causing the problem. Am I just not allowed to use FA with tabgroups?

Is it possible to change the color of the icon? I've tried the using the following color properties (not all at once), but it doesn't appear to change the actual icon:

'.icon' : {
    text : '\uf030',
    font : {
        fontFamily : 'FontAwesome',
        color: 'red'
    },
    color: 'red',
    backgroundColor: 'red'
}

Listview does not work with this widget.