Font-Awesome

Show and Tell
1

Just started playing around with Fuse today and wanted to use icons around the app. I came up with this import to use Font-Awesome icons as classes. Sorry for the long post, but there are almost 700 icons. Not sure if this would work everywhere (couldn’t try it out on my phone yet) but maybe it can be usefull to someone.

MainView.ux

<App Theme="Basic">
    <!-- Declare the Icon font (place in ./fonts folder) -->
    <Font File="fonts/fontawesome-webfont.ttf" ux:Global="fa" />

    <!-- Example of usage -->
    <fa-upload FontSize="50" />
</App>

icons.ux

<Panel>
    <Text ux:Class="fa-500px" Font="fa">&#xf26e;</Text>
    <Text ux:Class="fa-adjust" Font="fa">&#xf042;</Text>
    <Text ux:Class="fa-adn" Font="fa">&#xf170;</Text>
    ...
</Panel>

See here for the full example code.

2

Nice :slight_smile:

3

Very nice, love it :slight_smile:

4

Hello,

I’m implenting the code as it is but I’m getting the error below, what could be the issue? thanks

MainView.ux(37,28): E1132: Expected ‘{’ /Applications/MAMP/htdocs/fuse/attractor-minimal/MainView.ux(37,29,37,30): Error E1132: Expected ‘{’ MainView.ux(37,28): E1108: Unexpected token ‘Minus’ /Applications/MAMP/htdocs/fuse/attractor-minimal/MainView.ux(37,29,37,30): Error E1108: Unexpected token ‘Minus’ (3,221.94 ms)

Build completed in 3.23 seconds. 0 Warning(s) 2 Error(s)

Error Summary

MainView.ux(37,28): E1132: Expected ‘{’ MainView.ux(37,28): E1108: Unexpected token ‘Minus’ Build ended fuse: Failed to compile project

5

I think - is illegal for ux:Class. Try to do search replace - with _ or similar.

6

Works like a charm, Thanks a lot Strand!

7

Oh yeah, thanks Olavo!

8 
I love you
9

The same technique works for other fonts. I am using elusive icons (http://elusiveicons.com/icons/) and font web symbols liga (http://www.justbenice.ru/studio/websymbols/). For Elusive icons, you can click on the icon you’re interested in and it will show you the unicode code for it in the header below the displayed icon in different sizes.

10

Hey guys, thank you for that. It works super fine with 4 digits unicodes, but I’m Trying to do the same with a font which uses unicodes with 5 digits such this one: http://unicode-table.com/en/1F440/

  <Text ux:Class="icnLink" Font="gzm">&#x1F517;</Text> <!-- 5 digits unicode: It doesn't work -->
  <Text ux:Class="icnUnlink" Font="gzm">&#xE011;</Text> <!-- 4 digits: It works -->

any help on that?

11

I’ve taken the liberty of moving most of this example code into a gist on GitHub in order to keep this thread a bit easier on the eyes.

Very cool example, though!

13

Helder, I found a fix, not sure if it’s the best around, but it works (store the chars inside the .JS)

:stuck_out_tongue:

var Observable = require("FuseJS/Observable");

var icn = Observable();
icn = {
   mail:"\u2709",       // "&#x2709;      <-- works fine inside value or string in UX
   eye:"\ud83d\udc40"   // "&#x1F440;"    <-- does NOT work inside value or string in UX
   //both works well as databinded values. Show them like that:
   //<Text Value="{icn.eye}" />
}

module.exports = {
  icn: icn
};
14

Interesting to notice that the 16-bit char does not appear correctly on the Local preview (Mac), but works fine on them device (Android). iOS was not tested.

15

Not sure if this is an issue or expected but I find that this does not work anymore unless you ux:include the Icon.ux file into your main file i.e. MainView.ux

If I do not include the Icon.ux file I get errors such as:

build\Local\Preview4\cache\BackButton.g.uno(36,25): E3114: There is nothing named 'fa_chevron_left' accessible in this scope. Are you missing a package reference?
16

Please How do you include it…

17

Instructions on how to include it are in the gist posted earlier. Here is where I downloaded a copy of the .ttf font file needed.