John
August 2, 2017, 10:10am
1
Hi,
I want to implement several buttons with custom images as icon, so when user clicks on an image some function runs,
what would be the best solution ?
I found icon attribute in class AbstractButton, but it is not clear how to use it.
Thanks in advance
2 Likes
Hi John
I would like to do the same. Did you ever find out how to do it?
Thanks in advance.
Marc
Bryan
November 18, 2019, 6:32am
3
Button
has a property to set and icon
but as of 1.4.0 there is not a built-in icon class that can be used (only a base class that could be extended). Adding an image will require making a custom extension. You can see an example of a custom extension that draws FontAwesome icons here:
bokeh/examples/custom/font-awesome at branch-3.0 · bokeh/bokeh · GitHub
You could adapt that example by having the render
function in the JS implementation insert the image you want.
I made a quick example with panel but it should not be hard to port on pure bokeh:
raw code
import panel as pn
css = """
.btn-custom > .bk-btn-group > .bk-btn {
background-image: url(https://previews.123rf.com/images/hemantraval/hemantraval1206/hemantraval120600022/13975128-glassy-aqua-blue-next-icon-button.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
"""
pn.extension(raw_css=[css])
pn.widgets.Button(name='', css_classes=['btn-custom'], width=50, height=50)
1 Like
Bryan
November 18, 2019, 5:13pm
5
Great alternate solution!