Font Awesome: fa-layers-text data transform broken


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


I have copied and pasted the text from the Wiki webpage for Font Awesome at 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:


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


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.


@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.


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*



@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.


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!!