title: jqGrid:Font Awesome Icons
body: <p>I am trying to use Font Awesome icons in place of the jqueryUI icons for the toolbar in my jqGrid (add,edit,delete,view icons). </p>
  
  <p><a href="http://www.ok-soft-gmbh.com/jqGrid/FortAwesome/FontAwesome2.htm" rel="nofollow noreferrer">This</a> demo is exactly what I would like to accomplish. I've read Oleg's <a href="https://stackoverflow.com/questions/13862963/jqgrid-pager-area-using-font-awesome-icons/19151794#19151794">answer</a> that demonstrates removing the icon class and adding the Font Awesome icons in its place. But when I try to do that nothing changes. I believe I'm possibly referencing the icons wrong. </p>
  
  <p>I downloaded Font Awesome 4.0.3 and I have jqGrid 4.5.4--In the _icons.scss file of the FA file tree the icons are referenced like this:</p>
  
  <pre><code>.#{$fa-css-prefix}-pencil:before { content: $fa-var-pencil; }
  </code></pre>
  
  <p>But in Oleg's suggested code the new icons are labeled "icon-pencil":</p>
  
  <pre><code>$grid.jqGrid("navGrid", "#pager", {editicon: "icon-pencil",
          addicon: "icon-plus", delicon: "icon-trash", searchicon: "icon-search",
          refreshicon: "icon-refresh", viewicon: "icon-file",view: true});
  
  $("#pager .navtable .ui-pg-div&gt;span").removeClass("ui-icon");
  </code></pre>
  
  <p>This is my code: I only did the edit icon for this example. I also used the new label for the icons, "fa-pencil". </p>
  
  <pre><code>jQuery("#grid").jqGrid('navGrid','#grid_toppager"', {editicon: "fa-pencil", edit:true});
  
  $('#grid_toppager .navtable .ui-pg-div&gt;span').removeClass('ui-icon'); 
  </code></pre>
  
  <p>What combination of code do I need in order to replace the ui-icons with the Font Awesome icons?</p>
  
  <p>Any helpful tips would be appreciated, thanks</p>