How do I display add and edit icons for custom function in jqGrid?

Question

I am trying to have custom add and edit functions in jqgrid. I can get the add and edit functions to work correctly, but I can't get the add and edit icons to display correctly. Instead, an arrow(^) appears instead of the plus or edit. What I've tried: *Importing jquery-ui before and after the jqgrid

//jqgrid code

$('#jqgrid').jqGrid({
        ...
            })
        .navButtonAdd("#pager", {
            caption:"Add",  
        buttonicon:"ui-icon-add", 
        onClickButton: function(){ 
            $("#lui_jqgrid").show()
            $('#addForm').show();
            }, 
        position:"last"
            })
        .navButtonAdd('#pager',{ 
        caption:"Edit", 
        buttonicon:"ui-icon-edit", 
        onClickButton: function(){ 
            $('#addForm').show();
               }, 
        position:"last"
            });

I have the "ui-icon-add" and "ui-icon-edit" under button icon but they are not showing up. This project using backbone.js and I'm importing jquery-ui.js before jqGrid.

How can I get the icons to show up? Instead, I could just have the caption and no icon, but removing buttonicon still shows one.

Answer 1

Update your code with below one. You have some mistakes in your code.

The available buttons are ThemeRoller | jQuery UI , place the cursor the style class will be shown. Use those buttons in jqgrid.

.navButtonAdd("#pager", {
        caption:"",  
    buttonicon:"ui-icon ui-icon-newwin", 
    onClickButton: function(){ 
        $("#addForm").show();
        }, 
    position:"last"
        })
    .navButtonAdd('#pager',{ 
    caption:"", 
    buttonicon:"ui-icon ui-icon-pencil", 
    onClickButton: function(){ 
        $('#addForm').show();
           }, 
    position:"last"
        });

OutPut on navgrid of jqgrid: