Redimensionnement des icônes dans jquery-UI

Question

Je trouve que les icônes de l'interface utilisateur de jQuery sont un peu petites pour mon application. Bien sûr, il n’est pas utile d’ajuster les tailles sur .ui-icon, car les images sont chargées à partir d’un seul fichier d’image, ce qui n’affiche que des portions d’autres icônes. Existe-t-il un moyen d'ajuster la taille des icônes sans avoir à redimensionner les fichiers d'image des icônes pour chaque taille que je souhaite utiliser?

Answer 1

C'est un vieux problème, mais voici ma solution (bidouille si vous préférez):

 .ui-icon-circle-close {
  -ms-transform: scale(2); /* IE 9 */
  -webkit-transform: scale(2); /* Chrome, Safari, Opera */
  transform: scale(2);
}
 

Pour un bouton d'icône uniquement, cela fonctionne très bien.

Answer 2

Pas de. Parce que les icônes sont emballés dans un sprite CSS de la grille, vous verrez les icônes autour d'elle si vous essayez de faire de l'icône elle-même plus (comme vous l'avez vu). Vous pouvez augmenter la "taille" de l'icône de réglage de la marge, mais cela ne va pas rendre le graphique plus - juste la place qu'il occupe.

Edit - Ressemble à du jQuery UI a entendu cette plainte avant et est en passe de déployer certaines grandes icônes dans la prochaine version de jQuery UI.

Answer 3

Notez que vous pouvez vraiment utiliser n'importe quelle icône que vous voulez tant que vous créer un style CSS qui l'utilise, et il n'a pas à être dans un pack sprite. Le "nom de l'icône" en jQuery UI Boutons est vraiment juste un nom de classe.

Le blog "Asseyez-vous Waldo" a bon exemple ici. Il démontre l'utilisation de la plus excellente FAMFAMFAM couleur ensemble d'icônes, mais vous pouvez vraiment utiliser son "de base" pour ajuster le positionnement et ensuite utiliser une icône que vous voulez dans votre propre feuille de style CSS.

À l'aide de son exemple est assez facile il suffit de télécharger les fichiers (vous avez seulement besoin du css et de l'icône des dossiers), puis ajoutez ces lignes à votre fichier 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"/>

ensuite, utilisez l'un des noms d'icônes dans vos options.
{icons: {primary: 'fff-icon-connect'},text: false}

PS, malheureusement Il ne ressemble pas aux nouvelles options de dimensionnement pour le jQuery UI a encore arrivé, même si ils en parlaient il y a 7 mois. Ils ne les rendent un peu plus grand, mais ils n'ont pas d'introduire une toute nouvelle dimension.