Font Awesome + GoJS

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

This sample uses icons from icomoon:

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

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

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.

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


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

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 } )


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' })

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).
$(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?..

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.

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

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.

my bad i forget add font family which causes issues .

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

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

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