Hi,
I have a requirement to show “*” icon before node text as shown in screenshot
I used font awesome icon for the text shown in screenshot as icon=“fa fa-asterisk”.
I already gone through Icons sample, Icons GoJS Sample and I couldn’t find an icon that I need. It will be helpful if you can provide me a code sample to achieve my requirement.
You haven’t said what your requirement is.
Most people just use a Picture there, showing whatever SVG they want, or else just a Shape, again showing whatever SVG path string or arbitrarily-constructed Geometry that they want.
As shown in above screenshot I need to show font awesome asterisk icon in my double tree node just before the text. Tree node shown in above screenshot is created using a different technology. I used below html element to add the font awesome icon
Here class name tells the icon name to be shown and title shows the tooltip and you can color code the icon.
I want to know whether GOJS supports font awesome icons, I mean provide class name and node should render the icon.
Reason for asking is, I want the icons to be consistent at all places and it will be very easy tomorrow if I want to change it to a different icon.
Yes, it should work to have a TextBlock whose TextBlock.font is a “Font Awesome” font and whose TextBlock.text is a single-character string if you want to show a single icon.
But I really think it is more natural, and it is certainly more flexible, if you use either a Shape or a Picture to show whatever icon you like to the left of the general text string in a TextBlock. Get Started with GoJS.
Hi Walter,
I don’t want to use any image. I am not able to figure out a way to directly use font awesome icons.
Could you please provide me with an example how can I directly use font awesome icon.
Below is the icon with html code that I want to use
<i class="fa fa-asterisk" title="Object with custom types" style="color:green"></i>
Use a “Horizontal” Panel containing two TextBlocks, one whose TextBlock.font is awesome, and one whose TextBlock.font is not.
Read about Panels at GoJS Panels -- Northwoods Software
For which property I should set “fa-asterisk”?
Rendering in GoJS is not limited to producing HTML elements that can be styled, so it depends on what CSS styles are implied by that class.
Here are the properties that you can set that are specific to text: TextBlock | GoJS API
I think the answers were not clear. I don’t know if you found the answer, but in any case here’s an approach
Thank you for the information. I achieved this functionality by using the solution mentioned in the link you shared above.
