Tim

The JS and MVC guys here often use Font Awesome as a means to inject very lightweight "glyphs" into their apps which can be coloured and sized really easily. It's a really popular solution these todays. The details are here:

http://fortawesome.github.io/Font-Awesome/icons/

Can you tell me if EWB 2 would easily support the use of Font Awesome and, if so, how?

Thanks
Mark

Mark Brooks wrote:

> Tim
>
> The JS and MVC guys here often use Font Awesome as a means to inject
> very lightweight "glyphs" into their apps which can be coloured and
> sized really easily. It's a really popular solution these todays. The
> details are here:
>
> http://fortawesome.github.io/Font-Awesome/icons/
>
> Can you tell me if EWB 2 would easily support the use of Font Awesome
> and, if so, how?

The new Icon component would work well with this!

"Matthew Jones" wrote:

>> The new Icon component would work well with this!

Well maybe Mathew. I haven't looked at that yet. Does it use "font characters" as opposed to images? That is the key to font-awesome.

Mark,

<< Can you tell me if EWB 2 would easily support the use of Font Awesome
and, if so, how? >>

You can't do font mapping for web fonts just yet, but I've got an idea on
how I want to do it, and will implement it sooner than later.  The general
idea is that you would install the Google, etc. font as a Windows font, and
then using a special library option you would specify a mapping to the URL
for the web font that matches it.  Then, the EWB compiler would include
these mappings in the HTML loader so that the EWB runtime could use them
instead for specifying the font information at the element level.

Tim Young
Elevate Software
www.elevatesoft.com

Matthew,

<< The new Icon component would work well with this! >>

The Icon control only works with the built-in icon library, and those are
..png, gif, .jpg, etc., not vector images like fonts.

Tim Young
Elevate Software
www.elevatesoft.com

Tim Young [Elevate Software] wrote:

> << The new Icon component would work well with this! >>
>
> The Icon control only works with the built-in icon library, and those
> are .png, gif, .jpg, etc., not vector images like fonts.

Indeed, but I looked at how these dont icons are done, and they are
just some CSS and items with a "class" definition. Obviously there is
some magic linking them, so the code would have to generate the
appropriate item, but it would give the icon library an instant list of
hundreds of useful and popular icons.

Perhaps not one for EWB directly, but if the icon list was layered so
that another component could provide the functionality that would allow
others to do the work.

Indeed, I guess someone who wanted to do it could do the layering and
then give you the result so that you don't have to do that either. Why
not?

"Matthew Jones" wrote:

>>Indeed, but I looked at how these dont icons are done, and they are
>>just some CSS and items with a "class" definition. Obviously there is
>>some magic linking them, so the code would have to generate the
>>appropriate item, but it would give the icon library an instant list of
>>hundreds of useful and popular icons.

I think that you're spot on Mathew. The Font Awesome "glyphs" (along with other popular alternatives) can make an incredible difference to the visual appeal and consistency of a web application. A component to allow simple display of them within an EWB app would be (no pun intended) awesome.

Matthew,

<< Indeed, but I looked at how these dont icons are done, and they are just
some CSS and items with a "class" definition. Obviously there is some magic
linking them, so the code would have to generate the appropriate item, but
it would give the icon library an instant list of hundreds of useful and
popular icons. >>

In EWB2, icons are handled as background images that are applied to a
designated UI element.  They are stored in the TIconLibrary interface.
There's only a few in there now because I want to keep the size down for
distribution, but I'm working on getting permission to include an icon
library with EWB2 that will match the default interface style.

You can add any icons you want to the TIconLibrary interface, rebuild the
component library, and then you'll have the icons available for use in EWB
for things like the TIcon control or the TToolBarButton controls.   To
create a new icon, just add a new state to the interface (copy the Home
icon), and then change the background image for the new state.  With the
icon library:  state=icon.

Tim Young
Elevate Software
www.elevatesoft.com

Matthew,

<< Indeed, but I looked at how these dont icons are done, and they are just
some CSS and items with a "class" definition. Obviously there is some magic
linking them, so the code would have to generate the appropriate item, but
it would give the icon library an instant list of hundreds of useful and
popular icons. >>

Sorry, skip my last reply - I thought you were talking about the EWB icons
when you were talking about the font glyphs instead.

You could work up a control that could display these, but if you use their
CSS styles you won't be able to see them at design-time, and you'll be
loading a huge CSS file at runtime for pretty much no reason.  It would be
much better to treat them as what they are, a font, and use them in the EWB
2 icon library as such.  You can use the Font and Content properties to
display symbolic font glyphs in any size that you want.  You just have to
tell the interface to apply those properties instead of properties like the
background image.  I'll see if I can work up an example.

Tim Young
Elevate Software
www.elevatesoft.com

Tim Young [Elevate Software] wrote:

> Sorry, skip my last reply

The last reply actually gives me what I need - the fact that the icons
are in an interface theme makes it ultimately very flexible. No need
for you to provide a thousand icons in a list when I can pick and
choose just the ones I want for my purposes.

One thought though - it might be nice to have them identified by a
textual name (as well as, or instead of, an index integer). That way I
can change theme or something and select "home" rather than selecting
17, which is home in one theme but delete in the updated theme.