Option to add an image on the grid link field


I would like to add an icon such as a pencil for edit on the grid/table view using the link option.



Hi Dan -

View and Edit links now can have icons added to them, when you click the edit pencil for that column. More information canb be found in our help article "Tables: Columns".


For reference: http://helpdesk.knackhq.com/support/discussions/topics/5000058375

Also added updates to this Tips & Tricks.

It also uses the text in the grid/table header for that column as the title (Text shown on hovering over the icon).

Hi, I have looked and can add it using JS/CSS but the "Edit", "View" and I assume "Delete" links all have the same class of "ang-link" meaning I cannot set different icons per link type, can we please refine this by adding another selector to each.

To add for example the + icon you see on the "Allow users to add records" Connections you would use the below replacing the "view_37" with your view unless you want it for all links then just use .any (I will also post in Tips & Tricks):


$(document).on('knack-view-render.view_37', function(event, view, data) {

$("td.kn-table-link > span > a.ang-link").text("").attr("title", $("th.kn-table-link > span").text()).append('<span class="icon-plus-sign"></span>');



#view_37 td.kn-table-link span a.ang-link {

text-decoration: none;


#view_37 td.kn-table-link span a.ang-link .icon-plus-sign:before{

color: #aaa;


#view_37 td.kn-table-link span a.ang-link:hover .icon-plus-sign:before {

color: inherit;