Assign fontawesome icons to a toolbar custom action

Community Support
1

Hi,
I’ve been able to add fontawesome icons to a button widget, following the example in the src-code - which is great :slight_smile:
I was now trying to move some of those actions, directly into the bokeh toolbar as bokeh.models.tools.customAction
I first had to change the callbacks to use js instead of python, so that a simple custom action looks like:

# js code to sho/hide a bokeh layout
show_hide_metadata_js = CustomJS(args=dict(metadata_layout=metadata_layout), code="""
if (metadata_layout.visible) {
    metadata_layout.visible=false;
} else {
    metadata_layout.visible=true;
}
""")
# attach the callback to a custom action item into the plot toolbar
show_hide_metadata = CustomAction(icon=os.path.join(os.path.dirname(__file__), 
                                                    'static', 
                                                    'icons', 
                                                    'db.jpg'), 
                                callback=show_hide_metadata_js,
                                action_tooltip='Show/Hide Metadata Table')

In the example above, I am using a direct link to an icon file, stored in the static folder of my application.

However, I was wondering if it is possible to re-use the icons from font-awesome. similar to what we have in the src-example:

icon=FontAwesomeIcon(icon_name="chevron-left", size=1)

I tried this way, but the custom action refuses the font awesome datatype.
I was mow trying to extract the data behind a FontAwesomeIcon object, and use that as e.g.: a numpy array … but I can’t manage toaccomplish it.
is there a simpler way?

2

Currently CustomAction only supports being configured with an image:

1 Like
3

I see. That’s why I was trying to extract an image array from the fontawesom icon object - but I didn’t find a way to do that. I tried to look at how to recode the fontawesome class I. A way to return an image-like data object, but I didn’t manage to get one.

4

I’m afraid I don’t know anything about FontAwesome to be able to suggest how to get images of their icons. Worst case you could just take your own screenshot of one I suppose.

5

I understand. I guessed that the class Button from bokeh.models.widgets was capable of doing just that (extract an image from the FontAwesome class) - so I was wondering if the same approach were possible in the CustomAction class. In any case, the way how it works now (image path or numpy array is great and quite flexible, I just wanted to have the icons all in the same place following the same style giving to the app a consistent look without too much effort :slight_smile: - and font awesome was a good option for that purpose)