Using font awesome svgs to create icon button

Questions
1

Hi!

Font awesome comes with a lot of nice svgs.
I would like to be able to create an icon button which is basically a disc that has a color and a white icon.

I’ve been able to load the svg as a texture and using hasAlpha to get black icons showing in my scene.

But I’m struggling with what the best way would be to create a material that is a solid color and has the icon in white on top without having to change the font awesome icons?

Example
https://www.babylonjs-playground.com/#PYRN9B

How would you solve it?

2

Hey!

Something like that?
https://www.babylonjs-playground.com/#PYRN9B#1

3

More like this where the mesh is a disc and the icon should be in the middle of the disc and be white.

37

I might have to resort to manually changing the fill of the svg, but it would be awesome if there was a way to invert a texture :slight_smile:

4

Better?
https://www.babylonjs-playground.com/#PYRN9B#2

Only caveat: it requires two draw calls

1 Like
5

Well, this is unrelated but . . .
. . . I have used MeshWriter to form SVG shapes in 3D meshes.
https://www.babylonjs-playground.com/#PL752W#25

6

Yeah that just what I want.

Another question
If the svg was white, would I be able to do it in one draw call?

7

Thats very interesting!
I can definitely see the another use for that :slight_smile:

8

Well, glad to hear it.

Creating glyphs for MeshWriter includes taking the output of a font file into something svg-like and then putting it into the “MeshWriter” format. (The process could use some automation but I am investing elsewhere.) Once I figured that out, I realized that any SVG shape could be replicated. Hence the anchor.

If you have some simple SVG shapes, or letters in a font, I am open to taking special requests. I can put them in Web-dings.
https://www.babylonjs-playground.com/#PL752W#1

1 Like
9

I just discover through this thread that we’re able to load a svg as texture :smiley:

3 Likes
10

Exactly!