Icon View Thread

The following is the text of the current message along with any replies.
Messages 1 to 8 of 8 total
Thread Font Awesome in EWB
Tue, Jan 28 2020 3:49 AMPermanent Link

Paul Coshott

Avatar

Hi All,

I was looking at Font Awesome's website and they have over 7,700 icons for $99 / year. When I go to the Library inside EWB and open the Icon Library, I can add a new state (or an icon I can use in my web app) and change the content to display a different icon. If I purchase these icons, can I set these up somehow, so I can see them inside EWB and use them in the same way I can with the included icons?

Cheers,
Paul
Tue, Jan 28 2020 9:42 AMPermanent Link

Raul

Team Elevate Team Elevate

On 1/28/2020 3:49 AM, Paul Coshott wrote:
> I was looking at Font Awesome's website and they have over 7,700 icons for $99 / year. When I go to the Library inside EWB and open the Icon Library, I can add a new state (or an icon I can use in my web app) and change the content to display a different icon. If I purchase these icons, can I set these up somehow, so I can see them inside EWB and use them in the same way I can with the included icons?

EWB does bundle a subset of Font Awesome icons already (of the free
version not Pro that you're referring to).

Short answer is that yes you can use FontAwesome in your apps and just
make sure you embed the font with the app for deployment.


See this section in manual for info on fonts in general
https://www.elevatesoft.com/manual?action=viewtopic&id=ewb2&topic=Icon_Library

but i think it basically boils down to

Add them to you OS so you have IDE access to them
Add icons you want to the icon library (this is how you can use them EWB)
In project options you can specify and embed an icon font
And then test in runtime when deployed that all looks OK and font is loaded

if you search this NG there are number of Font Awesome references

Raul
Thu, Jan 30 2020 4:52 AMPermanent Link

Paul Coshott

Avatar

Raul wrote:

>Short answer is that yes you can use FontAwesome in your apps and just
>make sure you embed the font with the app for deployment.

>Add them to you OS so you have IDE access to them
>Add icons you want to the icon library (this is how you can use them EWB)
>In project options you can specify and embed an icon font
>And then test in runtime when deployed that all looks OK and font is loaded

Thanks for answering Raul. I have downloaded the free version of Font Awesome (1500+ icons in 3 otf files). I can't figure out how to get these into the IDE. If I open the Icon Library, create a new state, select the FontIcon element and click into the Content property, I can see all the standard icons that come with EWB. How do I get the other 1500 icons in so I can select from them?

I'm hoping i can have more than 1 otf file installed, as i want to use the standard ones and also the full free set from Font Awesome. I also saw that I need to include the otf file in my project options. Is it only possible to include 1 otf file here?

Cheers,
Paul
Mon, Feb 3 2020 9:12 AMPermanent Link

Raul

Team Elevate Team Elevate

On 1/30/2020 4:52 AM, Paul Coshott wrote:
> Thanks for answering Raul. I have downloaded the free version of Font Awesome (1500+ icons in 3 otf files). I can't figure out how to get these into the IDE. If I open the Icon Library, create a new state, select the FontIcon element and click into the Content property, I can see all the standard icons that come with EWB. How do I get the other 1500 icons in so I can select from them?
>
> I'm hoping i can have more than 1 otf file installed, as i want to use the standard ones and also the full free set from Font Awesome. I also saw that I need to include the otf file in my project options. Is it only possible to include 1 otf file here?

Sorry - have not really used this as i have been fine with default one.

Looks like one is limited to 1 otf file. In theory you can include more
as external files but then does not look like one can populate
iconlibrary .

This might be a Tim question or maybe somebody else can chime in.

Raul
Sat, Feb 8 2020 5:16 PMPermanent Link

erickengelke

Avatar

Raul wrote:

On 1/30/2020 4:52 AM, Paul Coshott wrote:
> Thanks for answering Raul. I have downloaded the free version of Font Awesome (1500+ icons in 3 otf files).
> I can't figure out how to get these into the IDE.

Some months ago, Tim posted a video showing how to do this.  It's not the hardest thing to do, but it does not have the ease and elegance which otherwise are so pervasive in this product.

There are a few occasions where I added a font-awesome icon to a TGrid or a button.  I chose an easier route than adding the font.  My approach is a kludge, but it takes just a minute to do and can look just as good.

1. Get the icon on your screen and do a print screen or use a screen grabber to get it.
2. Crop the grabbed image to jsut the icon and save as a PNG file.
3. Use a TImage to load the image wherever you need the icon.

If you are placing the TImage over part of a button, set the OnClick handler to be the same as the button's onclick handler so if the person clicks on the "icon" TImage, it will register as the  underlying button.

TGrids can have content that it of type Text, Icon, Image, or HTML or various others,   Choose image.

Even rich text can have <img src="blah.png"> embedded in it.

Although it's not a great answer, I hope that helps.

Erick
EWB Programming Books and Component Library
http://www.erickengelke.com
Sat, Feb 8 2020 5:29 PMPermanent Link

erickengelke

Avatar

erickengelke wrote:

>There are a few occasions where I added a font-awesome icon to a TGrid or a button.  I chose an easier route
> than adding the font.  My approach is a kludge, but it takes just a minute to do and can look just as good.

Attached is a sample page using this technique.
EWB Programming Books and Component Library
http://www.erickengelke.com



Attachments: Screen Shot 2020-02-08 at 5.26.55 PM.png
Sat, Feb 8 2020 5:34 PMPermanent Link

erickengelke

Avatar

erickengelke wrote:

erickengelke wrote:

>>There are a few occasions where I added a font-awesome icon to a TGrid or a button.  I chose an easier route
>> than adding the font.  My approach is a kludge, but it takes just a minute to do and can look just as good.

>Attached is a sample page using this technique.

BTW, you can use .GIF files and animate the images/ICONs.  We did that with the pen icon, because people wanted to be drawn to the active signing role.  I was afraid it would look tacky, but people complimented it on being vibrant.

Erick
EWB Programming Books and Component Library
http://www.erickengelke.com
Wed, Feb 19 2020 1:19 PMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.

Avatar

Email timyoung@elevatesoft.com

Paul,

<< Thanks for answering Raul. I have downloaded the free version of Font Awesome (1500+ icons in 3 otf files). I can't figure out how to get these into the IDE. If I open the Icon Library, create a new state, select the FontIcon element and click into the Content property, I can see all the standard icons that come with EWB. How do I get the other 1500 icons in so I can select from them? >>

For the FontIcon element in the selected state in the Icon Library, make sure that the Font property is set to the font you wish to use, not the default 'EWBIcons' font.  You will need to make sure that the icon font is installed into Windows already using the normal Windows font installation techniques (right-click/Install Font in Windows Explorer).

Then, the only other necessary step is to make sure that the icon font that you wish to use is included with the project.  You can do this by specifying the OTF font file name in the Project Options dialog, or you can just include it as an external file with the project.  EWB's compiler will make sure that any font files included as an external file are registered in the application's HTML file as font faces that you can use in your application, so the only difference from the project options is that you cannot specify that the external file be embedded in the HTML file.  One of the *advantages* of using the external files route is that you can specify an external URL for the font file.

Tim Young
Elevate Software
www.elevatesoft.com
Image