Hi everyone,

I have updated to the latest 2.06 build 5. This problem was there before with 2.05.

I am using simple TIcon components on a form. I created a new TIconLibrary to use font awesome directly (not the Elevate stock version to get more icons).

Icons appear badly truncated. When I run from the local machine all appears good. You can see here,
https://drive.google.com/open?id=0B8calqEI9LMVbm1QZnNLWTV2VEU

When I run from any other machine there is truncation. I am not sure it does this on all browsers, but certainly in Chrome.

You can see the result here,
https://drive.google.com/open?id=0B8calqEI9LMVbWs2bzkzSlFSYWc

In my Project | External files, I include all FontAwesome font files. See here,
https://drive.google.com/open?id=0B8calqEI9LMVYUhpaEhBN0ZHVVU

Is there any solution to this?

Thanks,

Michel

Try setting:

FontIcon -> AutoSize to True.

Michel,

not at NY computer, but did you set AutoSize = true?

Uli

Thanks guys.

I tried the Icon.FontIcon.AutoSize := True and there is still truncation. To test I also tried different sizes.

Again, locally if running on the same machine as the web server it works fine,
https://drive.google.com/open?id=0B8calqEI9LMVV0lBd0FPVHBZcjA

But remotely from another workstation,
https://drive.google.com/open?id=0B8calqEI9LMVUThOZWxDdGlDdWs

There is still truncation.

I tested with IE 11 remotely, and there is NO truncation:
https://drive.google.com/open?id=0B8calqEI9LMVYUoxZ25qUEpZRkE

You can also see the deployed application built with EWB 2.05.

http://www.allyoucanbike.com

You should see the truncation too in Chrome.

Any other ideas how to fix this?

Michel

Michel,

<< Icons appear badly truncated. When I run from the local machine all appears good. You can see here,
https://drive.google.com/open?id=0B8calqEI9LMVbm1QZnNLWTV2VEU >>

This is probably because the TTF version of the font file is being used, and I believe that it has the best implementation in terms of the layout of the icons.  The version that we distribute with EWB has been "fixed" a bit to prevent issues like this in some of the icons.  Be forewarned, Font Awesome isn't perfect and has some issues, so we will continually encounter minor glitches like this.

<< When I run from any other machine there is truncation. I am not sure it does this on all browsers, but certainly in Chrome. >>

I would start by removing all icon fonts from your External Files list *except for* the TTF version of the font.  Then test it on the various browsers and see where you are.  You may still need to adjust the padding for some of the icons in the EWB Icon Library to account for layout issues with the icons in the font itself (see above).  Just make sure to adjust the padding for the FontIcon element for each icon in the Icon Library that is exhibiting

Tim Young
Elevate Software
www.elevatesoft.com

Thanks Tim.

Just including the ttf external file is working well on my local network.

But then I tried "live" in Firefox, and got truncation again,
https://drive.google.com/open?id=0B8calqEI9LMVVEFwNjhmVnNGRkE

I checked with "View Page Source" in the browser,and confirmed there is only the TTF font file:

At the top:
<link rel="icon" type="image/x-icon" href="BikeStudio.ico">
<style>@font-face { font-family: "EWBIcons"; src: url("fontawesome-webfont.ttf") }</style>
<script type="application/json" data-ewbtype="ewbinterface" data-ewbname="TEdit" data-ewbcompressed="false">{

and at the bottom:

<style>@font-face { font-family: "FontAwesome"; src: url("fontawesome-webfont.ttf") }</style>
<script src="bikestudio.js"></script>
</head>
<noscript>

More strange, if I reload the page, then the icons are ok. On first load, in an "private browser" session there seems to always be truncation on the font icons.

Do you remember if you did any sort of 'post processing" on the FontAwesome icons?

I guess the other workaround would be the save images in relatively high res.

Thanks again,

Michel

Michel,

<< More strange, if I reload the page, then the icons are ok. On first load, in an "private browser" session there seems to always be truncation on the font icons. >>

Hmm, what happens if you try the OTF or WOFF version instead ?  It sounds like maybe the TTF version is no good.  I may have steered you in the wrong direction with TTF - we actually use the OTF version of Font Awesome, not the TTF version.  My apologies for the confusion.

One thing on using the WOFF version, though - certain older Android stock browsers can't handle the WOFF format and require OTF/TTF.

<< Do you remember if you did any sort of 'post processing" on the FontAwesome icons? >>

Yeah, but it was minor stuff and shouldn't be the cause of what you're seeing (most of the icons being truncated).  I used the Font Creator product from High Logic to make some adjustments on some of the icons that simply wouldn't behave properly.

http://www.high-logic.com/font-editor/fontcreator.html

I also found this, which may or may not apply:

https://groups.google.com/forum/#!topic/icomoon/BPTnJzu-vt4

Basically, adding opacity to an icon element would cause the truncation.  I'm not sure if it applies to this case, though.

Tim Young
Elevate Software
www.elevatesoft.com

Hi Tim,

Thanks. For now I am leading to just creating images for those "button images", as this seems quite hit and miss.

I did also read about "Opacity" being the issue.

https://github.com/FortAwesome/Font-Awesome/issues/201

<<
Adding opacity to icons causes them to render in a truncated form in Chrome and webkit browsers, so if anyone else experiences this issue again, opacity might be to blame
>>

In TIcon I see the Opacity property. Does this mean by default Opacity is always used with TIcon. Is there a way to make sure Opacity is not used?

Michel

Michel,

<< Thanks. For now I am leading to just creating images for those "button images", as this seems quite hit and miss. >>

It isn't, really. I'm not sure what's going on with your tests and Font Awesome, but I didn't have this much problem when I first implemented the font icons.  I'm not blaming you, of course, but there isn't any "magic" required, and editing the font definitely isn't *required*.

<< In TIcon I see the Opacity property. Does this mean by default Opacity is always used with TIcon. Is there a way to make sure Opacity is not used? >>

"Using Opacity" in this respect means specifying an Opacity other than 100.

Tim Young
Elevate Software
www.elevatesoft.com

Hi Tim,

It is quite strange. I use a lot of smaller Font Awesome icons and they all render fine. But for some reason when I create large "buttons" with a TIcon and single Font Awesome character, truncation occurs. It seems related to webkit base browsers. I also did lots of googling, and it seems like a known issue, and the solutions are all different too.

I tried Opacity 99 and still the icons where truncated. When running locally I never get the issue. In most cases, more strange, when I reload the page, the icons no longer truncate. It is just quite annoying. For my 6 top level button icons I have just switched to png images, and the size is still very small and they render well. This is the most effective solution, although it would be more clean with a font icon, it is good for now.

Thanks again,

Michel