Font Awesome + GoJS

GoJS
1

Is there a way to use font awesome or icomoon icon inside gojs shapes instead of pictures/svg?

2

This sample uses icons from icomoon: Icons GoJS Sample

3

@sarath47, @walter I accomplished this with this code:

$(go.TextBlock, { 
        text: '\uf030',
        stroke: '#000',
        margin: 8,
        font: '18px FontAwesome',
        editable: false,
        isMultiline: false
    }
)
4

By the way, TextBlock.stroke defaults to "black", TextBlock.editable defaults to false, and I believe the value of TextBlock.isMultiline will not affect the measurement or arrangement of a single-character string.

5

Sorry for the old bump - I got it working with FA just as described, but I couldn’t get it to work with my own Icomoon font icons:

$(go.TextBlock, { text: '\e900', stroke: '#000', margin: 8, font: '18px icomoon', editable: false, isMultiline: false } )

Any ideas on what I could be missing?..

Thanks.

6

How did you declare the font in your page? Did you use @font-face CSS? Which browsers and platforms did you try?

7

Looks like I had to also set the font-family. The following worked for me:

$(go.TextBlock, { text: '\e900', stroke: '#000', margin: 8, font: '18px icomoon, icomoon', editable: false, isMultiline: false } )

Thanks

8

Minor optimization: TextBlock.stroke defaults to ‘black’, TextBlock.editable defaults to false, and TextBlock.isMultiline should not matter for a single character string. So I’m guessing that this would be the same:

$(go.TextBlock, { text: '\ue900', font: '18px icomoon, icomoon' })
9

Hi @walter,
I’m afraid I wasn’t quite accurate with how I resolved it -
It had only worked for me when I used the character as text (instead of the code).
Meaning:
$(go.TextBlock, { text: '', font: '18px icomoon, icomoon' })
That square is the unicode character copied and pasted from icomoon.
That’s not ideal, I’d rather use the code but I can’t seem to get it to work by using \e900 as text… When I try using the code as text I simply see “\e900” displayed instead of my icon.
any ideas?..

10

I think in JavaScript code you need to use the Unicode character literal escape sequence: a backslash ‘’, followed by the letter ‘u’, followed by the Unicode code in hex.

That’s what sean-hill did, above.

11

i am getting same issue as  what was solution to it ?

12

What is your problem? Ronif in January 2018 said that using a Unicode character in a string literal worked, but that he preferred to use a Unicode escape sequence in the string. Which he did after getting the escape syntax correct.

13

my bad i forget add font family which causes issues .

14

I am getting an issue the icon is not displaying its shows a square box, below is my code

I have imported it like this
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css

$(go.TextBlock, {
text: ‘\uf1c0’,
font: ‘900 18px FontAwesome 5 Free’
}
)

15

Have you tried to make sure the font has been loaded before you display the diagram, or at least that text? I’m not sure we can tell efficiently whether a font has just been loaded. But you can: CSS Font Loading API - Web APIs | MDN

16

Here’s how I got it to work

        text: '\uf15c',
        font: "12px 'Font Awesome 6 Free'",

The font has to be in quotes inside the string quotes.

17

Thanks for that clarification!