2011-03-10 18 views
35

में आइकन का आकार बदलना मुझे jquery UI में आइकन मेरे एप्लिकेशन के लिए थोड़ा छोटा होने के लिए मिलते हैं। .ui-icon पर आकार समायोजित करने से निश्चित रूप से मदद नहीं मिलती है, क्योंकि छवियों को एक छवि फ़ाइल से लोड किया जाता है और इसलिए यह अन्य आइकन के भाग दिखाएगा।jQuery-UI

क्या प्रत्येक आकार के लिए आइकन छवि फ़ाइलों का आकार बदलने के बिना आइकन आकार को समायोजित करने का कोई तरीका है जिसका उपयोग मैं करना चाहता हूं?

उत्तर

22

नहीं। क्योंकि आइकन एक सीएसएस स्प्राइट ग्रिड में पैक किए जाते हैं, इसलिए आप आइकन को अपने आप को बड़ा बनाने की कोशिश करते हैं, जैसा कि आप आइकन को स्वयं बड़ा करते हैं (जैसा आपने देखा)। आप मार्जिन को एडजस्ट करके आइकन के "आकार" को बढ़ा सकते हैं - लेकिन इससे ग्राफ़िक बड़ा नहीं होगा - बस यह स्थान लेता है।

संपादित - ऐसा लगता है कि jQuery यूआई टीम से पहले यह शिकायत सुनी है और jQuery यूआई की अगली फिल्म में roll out some larger icons जा रहा है।

+1

ज़रूर, मार्जिन में वृद्धि करता है मैं क्या उम्मीद थी लेकिन दुर्भाग्य से इस मुद्दे को हल नहीं करता है। मेरे पास कुछ पुरानी आंखें हैं जिन्हें मुझे बड़े आइकन के साथ खुश करने की ज़रूरत है :) – adamnickerson

+1

@adamnickerson -: - \ हाँ, मैं पूरी तरह से समझता हूं। दरअसल, मुझे अभी एक ब्लॉग पोस्ट मिला है जो मैं * सोचता हूं * आपके लिए आपके प्रश्न का उत्तर देने जा रहा है। ऊपर दिए गए मेरे उत्तर में अपडेट देखें ... – JasCav

+0

उस पोस्ट को खोजने के लिए धन्यवाद - निश्चित रूप से अगली रिलीज की प्रतीक्षा कर रहा है। चीयर्स। – adamnickerson

5

ध्यान दें कि आप वास्तव में किसी भी आइकन का उपयोग कर सकते हैं जब तक आप इसे उपयोग करने वाली सीएसएस शैली बनाते हैं, और इसे स्प्राइट पैक में नहीं होना चाहिए। JQuery यूआई बटन में "आइकन नाम" वास्तव में सिर्फ एक वर्ग का नाम है।

ब्लॉग "सीट डाउन वाल्डो" का अच्छा उदाहरण here है। यह सबसे उत्कृष्ट FAMFAMFAM रंग आइकन सेट का उपयोग करके प्रदर्शित करता है, लेकिन आप वास्तव में स्थिति को समायोजित करने के लिए अपने "कोर" का उपयोग कर सकते हैं और फिर अपने स्वयं के सीएसएस में इच्छित किसी भी आइकन का उपयोग कर सकते हैं।

उसके उदाहरण का उपयोग काफी आसान बस फ़ाइलों को डाउनलोड (आप केवल सीएसएस और आइकन फ़ोल्डरों की जरूरत है), तो अपने 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"/> 

तो अपने विकल्पों में आइकन नामों में से एक का उपयोग करें ।
{icons: {primary: 'fff-icon-connect'},text: false}

पुनश्च, यह दुर्भाग्य से नया आकार देने वाला विकल्प की तरह नहीं दिखता के लिए jQuery यूआई अभी तक नहीं हुआ है, भले ही वे इसके बारे में 7 महीने पहले बात की थी। उन्होंने उन्हें एक बड़ा बड़ा बना दिया, लेकिन उन्होंने एक नया आकार नहीं पेश किया।

22

यह एक पुरानी समस्या है, लेकिन यहाँ मेरे समाधान (यदि आप चाहें हैक) है:

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

एक ही आइकन बटन यह बहुत अच्छा काम करता है के लिए।

+1

सीएसएस नियम लागू करने के बाद भी आइकन खराब दिखते हैं, फिर भी यह काम करता है। धन्यवाद। –

+0

शायद यह 'ज़ूम:' https://stackoverflow.com/questions/18696085/how-to-use-the-bigger-jquery-icons जैसा ही हो सकता है –

4

इस http://mkkeck.github.io/jquery-ui-iconfont/

स्रोतों का प्रयास करें: https://github.com/mkkeck/jquery-ui-iconfont

इसका एकमात्र jQuery-ui.icons.css और फोंट निर्देशिका शामिल करने के लिए की जरूरत है।

jQuery माउस आकार इस तरह बदला जा सकता है:

<style type="text/css"> 
    .ui-icon { 
     font-size: 1.2em; 
    } 
</style> 
संबंधित मुद्दे