Our blazing fast Grid component built with pure JavaScript
We can choose an icon from fontawesome and use code like below to see an icon for right clicking the grid
cellMenu : {
items : {
removeRow : false,
flagItem : { text: 'Edit', icon: 'b-fa-edit', weight: 10
Is there is easy way that I can just supply the image name and have that be displayed as the icon?
e.g.text: 'Edit', icon: 'edit.png', weight: 10
or do I need to research how to created my own fontawesome icon?
Last edited by
gregc on Sun Dec 27, 2020 12:20 am, edited 1 time in total.
I tried
cls : 'pluss',
tooltip : 'Increase salary',
visible : ({ record }) => !Boolean(record.children && record.children.length),
onClick : ({ record }) => record.salary = record.salary + 1000
with css
.pluss {
background-image: url('https://clipart-library.com/img/463371.png') !important;
background-repeat: repeat !important;
}
but I am obviously missing something on how to do it
https://codepen.io/gregca/pen/QWKOVyP
Few things:
Codepen is on SSL and your background-image link is not
Need to size your element too, something like:
background-image: url(https://clipart-library.com/img/463371.png) !important;
background-repeat: no-repeat !important;
width: 1em;
height: 1em;
background-size: 1em;
Thanks!, I did get it working. I can see though there is a lot of extra work getting the image and the text to look good so I'll keep that in my back pocket for now.
.iconpencil {
background-image: url('edit_pencil.png') ;
background-repeat: no-repeat ;
width: 128px;
height: 40px;
background-size: 24px 24px;
}