Encuentro que los íconos en jquery UI son un poco pequeños para mi aplicación. Ajustar los tamaños en .ui-icon no ayuda, por supuesto, porque las imágenes se cargan desde un único archivo de imagen y, por lo tanto, solo mostrará porciones de otros íconos.Cambiar el tamaño de íconos en jQuery-UI
¿Hay alguna forma de ajustar el tamaño de los iconos sin tener que cambiar el tamaño de los archivos de imagen del icono para cada tamaño que quisiera usar?
No. Debido a que los iconos están empaquetados en una cuadrícula de sprite CSS, solo verá los íconos a su alrededor si intenta hacer que el icono sea más grande (como lo vio). Puede aumentar el "tamaño" del icono ajustando el margen, pero esto no hará que el gráfico sea más grande, solo el espacio que ocupa.
Editar - Parece que el equipo jQuery UI ha escuchado esta queja antes y se va a roll out some larger icons en la próxima versión de jQuery UI.
Tenga en cuenta que realmente puede usar cualquier icono que desee siempre que cree un estilo CSS que lo use, y no tiene que estar en un paquete de sprites. El "nombre de icono" en jQuery UI Buttons es realmente solo un nombre de clase.
El blog "Sit Down Waldo" tiene un buen ejemplo here. Demuestra el uso del conjunto de iconos de color FAMFAMFAM más excelente, pero realmente puedes usar su "núcleo" para ajustar el posicionamiento y luego usar cualquier icono que quieras en tu propio CSS.
Usando su ejemplo es muy fácil sólo tiene que descargar los archivos (sólo necesita las carpetas css y el icono), a continuación, añadir estas líneas a su archivo HTML
<link href="libs/famfamfam/css/fff.icon.core.css" type="text/css" rel="stylesheet"/>
<link href="libs/famfamfam/css/fff.icon.icons.css" type="text/css" rel="stylesheet"/>
continuación, utilice uno de los nombres de los iconos en sus opciones .
{icons: {primary: 'fff-icon-connect'},text: false}
PS, por desgracia, no se parece a las nuevas opciones de tamaño para la interfaz de usuario jQuery ha ocurrido aún a pesar de que se habló hace 7 meses. Los hicieron un poco más grandes, pero no introdujeron un tamaño completamente nuevo.
es un viejo problema, pero aquí es mi solución (piratear si lo prefiere):
.ui-icon-circle-close {
-ms-transform: scale(2); /* IE 9 */
-webkit-transform: scale(2); /* Chrome, Safari, Opera */
transform: scale(2);
}
Para un botón de icono sólo funciona muy bien.
Incluso los iconos se ven mal después de implementar la regla CSS, funcionó de todos modos. Gracias. –
tal vez es lo mismo que 'zoom:' https://stackoverflow.com/questions/18696085/how-to-use-the-bigger-jquery-icons –
probar este http://mkkeck.github.io/jquery-ui-iconfont/
fuentes: https://github.com/mkkeck/jquery-ui-iconfont
Su necesidad de incluir solamente jquery-ui.icons.css y el directorio de fuentes.
El tamaño de los iconos de jQuery se puede cambiar así:
<style type="text/css">
.ui-icon {
font-size: 1.2em;
}
</style>
Claro, aumentando el margen hace lo que cabe esperar, pero no resuelve el problema por desgracia. Tengo algunos ojos más viejos que necesito agradar con iconos más grandes :) – adamnickerson
@adamnickerson -: - \ Sí, lo entiendo totalmente. En realidad, acabo de encontrar una publicación de blog que * creo * va a responder a su pregunta por usted. Ver la actualización en mi respuesta anterior ... – JasCav
Gracias por encontrar esa publicación - definitivamente estoy ansioso por la próxima versión. Aclamaciones. – adamnickerson