Font Awesome: fa-layers-text data transform broken


#1

I had an idea to use the Font Awesome feature fa-layers-text data-fa-transform function but it’s not working.

fa-layers-text%20data-transform%20issue

I have copied and pasted the text from the Wiki webpage for Font Awesome at https://wiki.webcore.co/Font_Awesome directly into the piston tile Text expression field and only changed the overall size to 1x to fit in the tile space for the text transform examples. I also pasted a couple other fa-layers examples just to be sure I was doing it right. The ones using Icons or the counter both work as expected. The fa-layer-text does not seem to be transforming at all.

Here’s a basic piston with the above tiles:


#2

Noted here (at the very bottom of the first post) and tracked on github.


#3

You might want to add a reply on that issue in GitHub with a simple message to share that the bug is affecting you. I double-checked and it still happens in the latest version 5.5.0 of Font Awesome.

Sorry I never added a note about the bug on the wiki in the hope that it would be resolved quickly.


#4

@bthrock @ipaterson A note on the wiki would be a good idea. Doh, Like an idiot, I lost my sign in credentials for Github and couldn’t even remember the emaIl address I used so I was putting off GitHub. But I spent some time and figured it out so I bumped your report there.

I had done a search here on fa-layers-text and data-fa-transform and came up with zero. At least now, it’s noted here as well.

The text data transform seems like it might be a good way to get more than 1 piece of information presented in that text field is my thinking. I was going to attempt to get 4, possibly 5, pieces of information into that space using the text transform.


#5

I have not tested this new feature yet, but it would be extra nice if each of the 4-5 icons could have their own separate color.

*crosses fingers*


#6

Multicolor%20Icons

@WCmore Is this what you mean?

'[fa-layers fa-1x|
    :fas fa-play data-fa-transform="rotate--90 grow-2":
    [color-red | :fas fa-sun data-fa-transform="shrink-10 up-2":]
    [color-skyblue | :fas fa-moon data-fa-transform="shrink-11 down-4.2 left-4":]
    [color-greenyellow | :fas fa-star data-fa-transform="shrink-11 down-4.2 right-3":]
]'

Edit: I tried fa-pulse on the sun too and it circled at the top.


#7

Oh yeah… I can’t wait to dive into this!
I am currently using a PHP server to draw my tiles, but this could simplify my coding quite a bit.

Thanks for the heads-up!!