Área de buscapersonas jqGrid – Uso de icons de fuente impresionante

Me gustaría utilizar íconos de Font Awesome:

 

en el área del localizador jqGrid en lugar de las imágenes físicas por defecto.

 .navButtonAdd('#vw_ComplaintSearchGridPager', { caption: '', buttonicon: 'ui-icon-disk', title: 'Save Grid Settings', onClickButton: function () { $(this).SaveGridSetting(); } }) 

¿Alguien sabe como lograr esto?

enter image description here

¡Es una pregunta muy interesante! Nunca utilicé icons de Font Awesome antes, pero parece un proyecto muy interesante.

Actualmente, jqGrid no tiene soporte directo de los icons de Font Awesome, pero preparé la demostración simple que muestra cómo reemplazar los íconos del navegador jQuery UI estándar con los íconos correspondientes de Font Awesome.

Uno puede ver mayormente claro la diferencia con los íconos del navegador original después del zoom de la página. Incluí debajo el navegador que se muestra con zoom 400%:

El navegador original que usa los icons de jQuery UI

enter image description here

El navegador con icons de Font Awesome:

enter image description here

El código que utilicé es muy simple. En lugar de uso

 $grid.jqGrid("navGrid", "#pager", {view: true}); 

solía

 $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>span").removeClass("ui-icon"); 

Agregué el CSS

 .ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span { margin: 0 5px; font-size: 12px; } 

Creo que es posible reemplazar más íconos de jQuery UI por íconos de Font Awesome, pero no es muy simple. Pensaré más en el problema y me pondré en contacto con el desarrollador de jqGrid (Tony Tomov) para que haga que jqGrid sea más amigable con los icons de Font Awesome, de modo que podría ser muy sencillo cambiar a los icons de Font Awesome.

ACTUALIZADO : Agregué el código que permite reemplazar más icons del buscapersonas:

 var $pager = $grid.closest(".ui-jqgrid").find(".ui-pg-table"); $pager.find(".ui-pg-button>span.ui-icon-seek-first") .removeClass("ui-icon ui-icon-seek-first") .addClass("icon-step-backward"); $pager.find(".ui-pg-button>span.ui-icon-seek-prev") .removeClass("ui-icon ui-icon-seek-prev") .addClass("icon-backward"); $pager.find(".ui-pg-button>span.ui-icon-seek-next") .removeClass("ui-icon ui-icon-seek-next") .addClass("icon-forward"); $pager.find(".ui-pg-button>span.ui-icon-seek-end") .removeClass("ui-icon ui-icon-seek-end") .addClass("icon-step-forward"); 

Como resultado uno obtiene el siguiente buscapersonas:

enter image description here

en lugar de

enter image description here

ACTUALIZADO 2 : El código para cambiar el icono minimizando parece un poco más completo. Uno primero debe cambiar el icono inicialmente

 $grid.closest(".ui-jqgrid") .find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>.ui-icon-circle-triangle-n") .removeClass("ui-icon ui-icon-circle-triangle-n") .addClass("icon-circle-arrow-down"); 

y luego cámbielo después de cada clic en el ícono:

 onHeaderClick: function (gridstate) { if (gridstate === "visible") { $(this.grid.cDiv).find(">.ui-jqgrid-titlebar-close>span") .removeClass("icon-circle-arrow-up ui-icon-circle-triangle-n") .addClass("icon-circle-arrow-down"); } else if (gridstate === "hidden") { $(this.grid.cDiv).find(">.ui-jqgrid-titlebar-close>span") .removeClass("icon-circle-arrow-down ui-icon-circle-triangle-s") .addClass("icon-circle-arrow-up"); } } 

Además, es necesario agregar el CSS

 .ui-jqgrid .ui-jqgrid-titlebar-close>span { margin: 0 3px; font-size: 16px; } .ui-jqgrid .ui-jqgrid-titlebar-close { text-decoration: none; } 

Para arreglar los icons de clasificación usé el código

 var $sortables = $grid.closest(".ui-jqgrid") .find(".ui-jqgrid-htable .ui-jqgrid-labels .ui-jqgrid-sortable span.s-ico"); $sortables.find(">span.ui-icon-triangle-1-s") .removeClass("ui-icon ui-icon-triangle-1-s") .addClass("icon-sort-down"); $sortables.find(">span.ui-icon-triangle-1-n") .removeClass("ui-icon ui-icon-triangle-1-n") .addClass("icon-sort-up"); 

y el CSS

 .ui-jqgrid .ui-icon-asc { height: auto; margin-top: 0; } .ui-jqgrid .ui-icon-asc, .ui-jqgrid .ui-icon-desc { height: auto; margin-top: 0; margin-left: 5px; } .ui-jqgrid .s-ico>.ui-state-disabled, .s-ico>.ui-state-disabled { padding: 0; } 

Como resultado uno obtendrá lo siguiente:

enter image description here

ACTUALIZADO 3 : en la próxima demostración se puede encontrar un reemplazo más completo de los íconos de la interfaz de usuario jQuery a los icons de Font Awesome.

ACTUALIZADO 4 : La respuesta proporciona una solución para Font Awesome versión 4.x.

Pensé que pondría una respuesta alternativa de CSS para los interesados. Uno de nuestros desarrolladores implementó una opción JS, que funcionaba funcionalmente, sin embargo, hubo un retraso antes de que se procesara correctamente (no es lo ideal).

Usamos íconos de fonts increíbles para nuestras opciones de búsqueda, y así es como lo implementamos.

Se encontraron las cuatro clases que jqGrid usaba para los icons de búsqueda que deseábamos personalizar y se creó el siguiente CSS para aplicar estilos de fonts básicas increíbles

 .ui-icon-seek-next, .ui-icon-seek-prev, .ui-icon-seek-end, .ui-icon-seek-first { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; } 

Entonces, simplemente es cuestión de tomar el content del ícono de la familia de fonts y usarlo como propio.

 .ui-icon-seek-next:before { content: "\f105"; } .ui-icon-seek-prev:before { content: "\f104"; } .ui-icon-seek-end:before { content: "\f101"; } .ui-icon-seek-first:before { content: "\f100"; } 

Entonces todo el CSS se ve así

 .ui-icon-seek-next, .ui-icon-seek-prev, .ui-icon-seek-end, .ui-icon-seek-first { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; } .ui-icon-seek-next:before { content: "\f105"; } .ui-icon-seek-prev:before { content: "\f104"; } .ui-icon-seek-end:before { content: "\f101"; } .ui-icon-seek-first:before { content: "\f100"; } 

Y la salida en nuestra grilla sin JS y sin demora enter image description here

Al ver la respuesta de Oleg arriba, hice lo siguiente para simplificar las cosas. CSS adicional

 .ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span.fntawsm { margin: 0 5px; font-size: 12px; padding-left:2px;padding-right:2px;} 

** relleno-izquierda: 2px; relleno-derecho: 2px; es opcional Y esto solo funciona con icons solo sin leyenda …

Y luego solo comienza a agregar icons fontawesome en navButtonAdd como

 caption:"", // important for above title:"Give any", buttonicon:"fntawsm icon-remove" buttonicon:"fntawsm icon-eject icon-rotate-90" 

etc. Puedes usar toda la funcionalidad adicional de font-awesome como icon-rotate-XX también. De esta manera, no tuve que eliminar la clase ui-icon de los tramos.

Inspirado por la respuesta de @afreeland, creé un css disponible en github que le permite convertir sus íconos en íconos de Font-Awesome.

La ventaja de rendimiento de esto sobre el método jquery que @Oleg describió es importante en mi opinión. También es una solución muy elegante en mi opinión.

Le invitamos a usarlo: https://github.com/guylando/ToAF

Nota: debe dar prioridad a estos estilos de archivo ToAF.css sobre los otros estilos de icons, de modo que se pueda lograr, por ejemplo, copiando el contenido CSS en una etiqueta en su documento.