Font-Awesome 🚀 - रेंडरिंग मुद्दा: आइकन-स्पिन fa-spin शेक / वोबबल (क्रोम फ़ायरफ़ॉक्स)

फ्राइकिंग फ़ायरफ़ॉक्स। इस परियोजना में IE के रूप में एक दर्द के रूप में ज्यादा हो गया। क्या आप 3.0.1 का उपयोग कर रहे हैं? इस मुद्दे पर मदद करने के लिए नए मोज़िला विशिष्ट स्पिन वर्ग हैं। अगर यह अभी भी हो रहा है, तो मुझे बताएं और मैं फिर से खोलूंगा।

davegandy 14 जन॰ 2013

मैं पुष्टि कर सकता हूं कि मैं 3.0.1 का उपयोग कर रहा हूं, मैंने फिर से डाउनलोड किया और डबल चेक किया और समस्या बनी रही।

मेरी पिछली टिप्पणी में, ऐसा लगता है जैसे मेरे उदाहरण छीन लिए गए थे, मैं आपको मेको टेम्पलेट भेजकर खुश हूं जहां यह मुद्दा होता है?

Katuva 14 जन॰ 2013

क्रोमियम (24.0.1312.56) पर .icon- स्पिन और लिनक्स, फ़ायरफ़ॉक्स (18.0.2) पर क्रोम का उपयोग करते समय मेरे पास एक शेक / वोबबल होता है। 13d5dd373cbf3f2bddd8ac2ee8df3a1966add99 पर परीक्षण किया गया

conrado 19 फ़र॰ 2013

👍2

मुझे 18.0.2 पर फ़ायरफ़ॉक्स पर शेक / वॉबल मिल रहा है, लेकिन कुछ परिस्थितियों में क्रोम या IE में नहीं। मैं हालांकि सटीक कारण को इंगित नहीं कर पाया हूं। (फ़ॉन्ट-भयानक v3.0.2 का उपयोग करके)

zoopcommerce 25 फ़र॰ 2013

मैं विंडोज 7 के तहत सभी ब्राउज़रों पर लड़खड़ा रहा हूं, लेकिन यह OSX के तहत सुंदरता की बात है।

bbruneau 6 मार्च 2013

@ दवेगंडी पिंग

conrado 27 मार्च 2013

मुझे Chrome संस्करण 26.0.1410.65 (हालिया संस्करण) पर एक वॉबल मिल रहा है। इस पर कोई काम?

jadekler 19 अप्रैल 2013

👍3

पिंग! मुझे भी समस्या हो रही है। देखें कि समस्या क्यों बंद हुई, क्योंकि यह अभी भी कायम है।

aisthesis 25 जून 2013

क्या आप कृपया इस मुद्दे को समझाते हुए एक बेला प्रदान कर सकते हैं

tagliala 30 जून 2013

वही समस्या यहाँ, कोई समाधान?

cqcn1991 14 जुल॰ 2013

Chrome के नवीनतम संस्करण (28.0.1500.71) के लिए पुष्टि की गई। छोटा आइकन, अधिक अतिरंजित आंदोलन है। यह समस्या आइकन-स्पिन वर्ग को प्रभावित करती है, कहीं भी इसे लागू किया जाता है।

BreadMaker 23 जुल॰ 2013

मैंने बिना किसी सफलता के 3 डी रोटेशन की कोशिश की। icon-circle घुमाना एक मुद्दा है।

tagliala 23 जुल॰ 2013

विंडोज 7 के तहत, मैं फ़ायरफ़ॉक्स 22.0, क्रोम 28.0.1500.72 में इश्यू कर रहा हूं। IE 8-10 वोबेल मुश्किल से दिखाई देता है, लेकिन उस मामले को करीब से देख रहा है जहां मैं इस मुद्दे को देख रहा हूं, मुझे लगता है कि अभी भी थोड़ा डगमग है। मैं इस मुद्दे के लिए एक बेला स्थापित करने के लिए अपनी पूरी कोशिश करूँगा, लेकिन पर्याप्त संदर्भ है कि इसमें कुछ समय लग सकता है।

aisthesis 23 जुल॰ 2013

मेरी jsfiddle नहीं, लेकिन यहाँ इस मुद्दे के साथ है: http://jsfiddle.net/Rnt9N/2/
मैक पर बहुत अच्छा लग रहा है, लेकिन विंडोज 7 के तहत फ़ायरफ़ॉक्स पर घबराना।

aisthesis 23 जुल॰ 2013

यह मेरे लिए इतना बुरा नहीं है (फ़ायरफ़ॉक्स 22 / w7 x64)।

tagliala 23 जुल॰ 2013

👍1

मैं नोड- webkit v0.7.5 का उपयोग कर एक ही मुद्दा है।
Spin.js का उपयोग करके समाप्त हुआ

hamxiaoz 18 सित॰ 2013

इसे फिर से खोलना क्योंकि यह भी FontAwesome की गलती है

tagliala 7 दिस॰ 2013

इस ट्वीट की तरह .fa-spin { -webkit-filter: blur(0); } करना मेरे लिए इसे निश्चित करता है।

paldepind 12 दिस॰ 2013

👍6 ❤2

इस समाधान को साझा करने के लिए @paldepind धन्यवाद

क्या आप कृपया एक स्पिन प्रदान कर सकते हैं जो वर्तमान स्पिन और प्रस्तावित स्पिन साइड को दिखा रहा है?

आप इस फिडेल को कांटा कर सकते हैं: http://jsfiddle.net/tagliala/HgYqA/

मैं विंडोज 7 पर क्रोम के साथ डगमगाने में अंतर नहीं देख रहा हूं। मैं "धीमी" आइकन स्पिनिंग को देख रहा हूं, जैसे कि आधे से अधिक एफपीएस दर

tagliala 12 दिस॰ 2013

@tagliala में आपका स्वागत है!

यहाँ दो स्पिनरों को दिखाया गया है, एक फिक्स के साथ और एक बिना: http://jsfiddle.net/paldepind/XLdQX/

मैंने लिनक्स पर क्रोम 30 और फ़ायरफ़ॉक्स 24 के साथ परीक्षण किया है। फ़ायरफ़ॉक्स में सब कुछ सुचारू है, लेकिन क्रोम में फिक्स के बिना स्पिनर थोड़ा लड़खड़ाता है। मैं हालांकि किसी भी ब्राउज़र में रोटेशन की गति में कोई अंतर नहीं देख रहा हूं।

paldepind 12 दिस॰ 2013

Windows 7 पर Chrome 32 आइकन को बिल्कुल भी प्रदर्शित नहीं करता है ...

tagliala 12 दिस॰ 2013

जीएनयू / लिनक्स में, क्रोमियम 30 के साथ फिक्स काम कर रहा है। फ़ायरफ़ॉक्स 26 के लिए समान नहीं है, क्योंकि फ़िल्टर संपत्ति अभी तक समर्थित नहीं है। https://developer.mozilla.org/en-US/docs/Web/CSS/filter

BreadMaker 12 दिस॰ 2013

विंडोज 8 पर फ़ायरफ़ॉक्स 26 के लिए, दोनों अभी भी मेरे लिए wobbly हैं। विंडोज 8 पर क्रोम 31 में, दोनों ठीक दिखते हैं।
12 दिसंबर, 2013 को 2:20 बजे, फेलिप पेनेलिलो सूचनाएं @github.com ने लिखा:

जीएनयू / लिनक्स में, क्रोमियम 30 के साथ फिक्स काम कर रहा है। फ़ायरफ़ॉक्स 26 के लिए समान नहीं है, क्योंकि फ़िल्टर संपत्ति अभी तक समर्थित नहीं है। https://developer.mozilla.org/en-US/docs/Web/CSS/filter
-
इस ईमेल का उत्तर सीधे दें या इसे GitHub पर देखें।

aisthesis 12 दिस॰ 2013

दुर्भाग्य से यह विंडोज़ पर नहीं दिखा और OSX पर बेकार है :(

http://jsfiddle.net/tagliala/XLdQX/2/

कताई आइकन एंटीलियास नहीं है और लड़खड़ाता रहता है

screen shot 2013-12-13 at 10 46 39

मुझे उम्मीद है कि यह एक व्यवहार्य समाधान था, लेकिन यह नहीं है

tagliala 13 दिस॰ 2013

@tagliala यह दुर्भाग्यपूर्ण है। मैंने केवल बेहतरीन परिणामों वाले लिनक्स के साथ अपनी मशीन पर ठीक करने की कोशिश की थी।

paldepind 13 दिस॰ 2013

@paldepind ओह मुझे पता है कि मुझे याद है कि मेरे ubuntu मशीन पर कताई सामग्री वास्तव में बेकार है

क्या आप कृपया उप-रूपांतरणों में बदलाव करने की कोशिश कर सकते हैं: http://jsfiddle.net/tagliala/96ULe/3/

tagliala 13 दिस॰ 2013

नमस्ते! मैंने आज क्रोम 31 को अपडेट किया और अब वॉबलिंग गायब हो गया है। तो शायद यह समस्या अपने आप दूर हो जाएगी।

@tagliala यकीन नहीं है कि मैं क्या देखने वाला हूँ। यह सब ऐसा लगता है जैसे मुझे यह सोचना चाहिए। लेकिन फिर से यह क्रोम 31 में है, जहां मुझे अब समस्या नहीं दिख रही है।

paldepind 13 दिस॰ 2013

@tagliala सबपिक्सल ट्रांसफ़ॉर्मेशन फ़िडल अब भी क्रोम 31 और फ़ायरफ़ॉक्स 26 पर

हालाँकि, मैं सहमत हूँ कि यह सबपिक्सल प्रतिपादन के कारण है।

यहां एक नई फ़ाइडल है जो कि चारों ओर एक लाल, गोलाकार सीमा के साथ एक रोटेशन पत्र ओ ("ओह") दिखाती है।

http://jsfiddle.net/bBaVN/208/

यह उदाहरण वास्तव में डगमगाता प्रभाव को बढ़ाता है, क्योंकि लाल सीमा सुचारू रूप से घूमती है, लेकिन हे डबरों।

-webkit-filter: blur(0); मेरे लिए समस्या को ठीक करता है। मुझे कोई अन्य निर्देश नहीं मिला, जो इसे ठीक करता हो, जिसमें --webkit-font-smoothing शामिल है।

मैंने केडीई के फ़ॉन्ट एंटी-एलियासिंग (सिस्टम सेटिंग्स -> एप्लिकेशन अपीयरेंस -> फ़ॉन्ट्स -> एंटी-एलियासिंग = विकलांग का उपयोग करें) को अक्षम करने की कोशिश की, और _this समस्या को भी ठीक करता है।

mehaase 16 दिस॰ 2013

दुर्भाग्य से -webkit-filter: blur(0); एक समाधान नहीं है क्योंकि यह विंडोज़ को तोड़ता है

tagliala 16 दिस॰ 2013

@tagliala सुनिश्चित नहीं है कि विंडोज का कौन सा संस्करण आपके लिए काम नहीं कर रहा है। मैंने नवीनतम क्रोम और IE 11 में प्रस्तावित समाधान का परीक्षण किया है। यह फ़ायरफ़ॉक्स के साथ काम नहीं करता है।

silentworks 23 दिस॰ 2013

@silentworks यह Win7 x64 को तोड़ता है - क्रोम 32

http://jsfiddle.net/tagliala/XLdQX/2/

इसके अलावा, जब यह काम करता है, यह वास्तव में गरीब antialiased है।

मुझे लगता है कि मुख्य समस्या यह है कि फोंट के अंदर आइकन पूरी तरह से केंद्रित नहीं हैं: http://jsfiddle.net/XLdQX/5/

जैसा कि आप नीचे दिए गए स्क्रीनशॉट में देख सकते हैं, नीचे 3 खाली पिक्सेल हैं और ऊपर 2: यह डगमगाने का कारण होगा।

यदि आप उस तरीके से चौड़ाई सेट करने में सक्षम हैं जो आइकन केंद्रित है, तो आइकन डगमगाएगा नहीं: http://jsfiddle.net/XLdQX/6/

IMHO इस कताई सुविधा को हटा दिया जाना चाहिए, यह लाभ की तुलना में अधिक परेशानी का कारण बनता है

tagliala 23 दिस॰ 2013

WONTFIX क्योंकि बहुत काम: -1:
लेकिन हाँ, यह निफ्टी था ... लेकिन निस्सार नहीं। स्पिन करने के लिए कुछ आइकन प्राप्त करने के लिए सभी फोंट को फिर से तैयार करना बहुत काम है और ज्वार के खिलाफ जाता है।

conrado 23 दिस॰ 2013

@conrado यहाँ कोई "wontfix" लेबल नहीं है

tagliala 23 दिस॰ 2013

यह अभी भी एक उपसर्ग है। शायद स्पिन के लिए उपयुक्त कुछ ग्रिफ़्स पर फिर से काम किया जा सकता है

conrado 24 दिस॰ 2013

यह अभी भी एक उपसर्ग है।

नहीं, यह नहीं है। इसे ठीक से खोला और बग के रूप में लेबल किया गया है

tagliala 24 दिस॰ 2013

टिप्पणियों को पढ़ने के बाद भी मुझे वास्तव में इस मुद्दे की स्थिति पर यकीन नहीं है, लेकिन चूंकि यह अभी भी खुले रूप में चिह्नित है: क्रोमियम 31 और फ़ायरफ़ॉक्स अरोरा 28 (2014-1-13) ज़ुबांटु पर अभी भी हिला हुआ है।

ahamilton9 6 फ़र॰ 2014

@ ahamilton9 एक नज़र डालें यहाँ: https://github.com/FortAwesome/Font-Awesome/issues/2709#issuecomment -32045585

tagliala 6 फ़र॰ 2014

ठीक है, मुझे लगता है कि यह हर फ़ॉन्ट में ब्राउज़र बग है।
इसके तीन उदाहरण हैं: http://jsfiddle.net/3T8Kz/

पहली: बग के साथ फ़ॉन्ट-विस्मयकारी फ़ॉन्ट केंद्रीकृत।
दूसरा: एक और उदाहरण लेकिन एक सामान्य फ़ॉन्ट के साथ
तीसरा: फोंट के बिना, बस एक div, एक ही एनीमेशन के साथ और बग के बिना।

victorperin 26 मई 2014

मेरे लिए एक ही बग फ़ायरफ़ॉक्स 31, लिनक्स।
यदि यह ग्लिफ़ के आकार के कारण होता है - यह केवल ग्लाइफ़ को स्पिन करने के लिए ठीक करने के लिए पर्याप्त है, उन सभी को नहीं।

nazar-pc 14 जुल॰ 2014

: +1: +1 यह अगले प्रमुख संस्करण के लिए माना जाना चाहिए, जहां संभवतः सभी ग्लिफ़ को फिर से दर्शाया जाएगा।

johnnyshields 19 अग॰ 2014

इस मुद्दे को आधिकारिक वेबसाइट पर भी देखें :

(फ़ायरफ़ॉक्स का नवीनतम संस्करण)

इसे निश्चित देखना पसंद करेंगे: +1:

thejhnz 27 अग॰ 2014

इस मामले पर पुल अनुरोध और गहरी जांच बहुत स्वागत है

tagliala 27 अग॰ 2014

यह एक क्रोम बग लगता है

luccasmaso 27 अग॰ 2014

@davegandy कोई अपडेट?

thejhnz 1 सित॰ 2014

@thejhnz

https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -5-544936

tagliala 1 सित॰ 2014

मैक ओएस एक्स पर क्रोम 37.0.2062.124, आईओएस 7.0.4 पर सफारी

designbyadrian 29 सित॰ 2014

+1

aguavisual 7 अक्तू॰ 2014

मैं एक स्थानीय परियोजना में उपयोग करने के लिए इस समस्या का इलाज करने में सक्षम था (मैं हल नहीं कहूंगा)
-वेबकैट-ट्रांसफॉर्म-मूल: 49% 48.5%;
-मोज़-ट्रांसफॉर्म-मूल: 49% 48.5%;
-एमएस-ट्रांसफॉर्म-मूल: 49% 48.5%;
-ओ-परिवर्तन-मूल: 49% 48.5%;
परिवर्तन-उत्पत्ति: 49% 48.5%;

struesdell 16 अक्तू॰ 2014

👍4

मैं "fa-Circle-o-notch" को प्रतीक के रूप में लोड करने के लिए उपयोग कर रहा हूं और मूल को बदलने के लिए इस मूल्यों का उपयोग करता हूं ताकि यह डगमगाने न पाए

.fa-Circle-o-notch.fa-spin {
-वेबकिट-ट्रांसफॉर्म-मूल: 50% 48.9%;
-मोज़-ट्रांसफॉर्म-मूल: 50% 48.9%;
-एमएस-ट्रांसफॉर्म-मूल: 50% 48.9%;
-ओ-परिवर्तन-उत्पत्ति: 50% 48.9%;
परिवर्तन-उत्पत्ति: 50% 48.9%;
}

magnyld 6 नव॰ 2014

@ मैगनील्ड मैंने अभी-अभी कोशिश की है, लेकिन डोम परिवर्तन के बाद भी

thejhnz 6 नव॰ 2014

आप मूल परिवर्तन का उपयोग करके भरोसा नहीं कर सकते। यदि आइकन बड़ा या छोटा है, तो यह टूट सकता है। जैसा कि मैंने पहले कहा, यह फ़ॉन्ट भयानक समस्या नहीं है, क्योंकि यदि आप एक पूर्ण सर्कल स्टाइल डिव को स्पिन करने का प्रयास करते हैं, तो परिणाम समान है। मुझे यकीन है कि यह वेबकिट इंजन बग है।

luccasmaso 6 नव॰ 2014

नहीं, यह फ़ायरफ़ॉक्स में भी मौजूद है https://bugzilla.mozilla.org/show_bug.cgi?id=9207979

ostrolucky 7 नव॰ 2014

फ़ायरफ़ॉक्स 33, OSX में वॉबलिंग।

mikejoyceio 26 नव॰ 2014

यहाँ एक ही समस्या ( wobbling स्पिन ) :(

boustanihani 3 दिस॰ 2014

इस मुद्दे के गहन विश्लेषण के साथ अनुरोधों को खींचो, फायदे और कमियों का एक उचित स्पष्टीकरण बहुत स्वागत किया जाएगा।

tagliala 3 दिस॰ 2014

समस्या आइकन से ही आती है। यदि आप Icomoon स्पिनर संस्करण लेते हैं, तो यह बिल्कुल भी डगमगाने वाला नहीं है। यह क्रोम 39, विंडोज और IE11, विंडोज पर अच्छा काम करता है। मैं अन्य ब्राउज़रों के लिए नहीं जानता।

http://jsfiddle.net/cxxzh0uf/

alexandrejobin 4 जन॰ 2015

@skoub

एक ही आकार के सभी आइकनों को रखने का दृष्टिकोण इस उद्देश्य के लिए बेहतर लगता है, लेकिन यह पर्याप्त नहीं है।

http://jsfiddle.net/tagliala/cxxzh0uf/2/

अगर मैं :before छद्म भुगतान का निरीक्षण करता हूं, तो मैं देखता हूं कि फ़ॉन्टवॉटर "अजीब" है

मैंने एक ही चौड़ाई और ऊंचाई निर्धारित करने की कोशिश की लेकिन चीजें बेहतर नहीं हो रही हैं।

मुझे लगता है कि यह फ़ॉन्ट से संबंधित है और सीएसएस के माध्यम से हम कुछ भी नहीं कर सकते हैं।

डेव को फॉन्ट पर एक नज़र डालना चाहिए और Icomoon द्वारा उत्पन्न फोंट का निरीक्षण करके यह समझने की कोशिश करनी चाहिए कि इस मुद्दे को ठीक करने का सबसे अच्छा तरीका क्या है।

हम .otf फ़ाइल के संपादन के साथ पुल अनुरोध स्वीकार नहीं कर सकते, लेकिन हम इस मामले में कुछ मदद की सराहना करेंगे। अगर यहां कोई व्यक्ति फॉन्ट देख सकता है और समस्या की पहचान कर सकता है तो उसका बहुत स्वागत है

मेरी अंग्रेजी के लिए क्षमा करें, यहां भी देर हो चुकी है :)

tagliala 5 जन॰ 2015

@tagliala यहाँ पर साथ ही साथ घड़ी-ओ-मुद्दे को जोड़ने के लिए धन्यवाद, यह वही मुद्दा है जिसका बाकी उल्लेख कर रहे हैं।
मैंने देखा है कि fa fa-cog में एक ही समस्या है, लेकिन यह समान परिस्थितियों में fa fa-watch या अन्य में से कुछ के रूप में ध्यान देने योग्य नहीं है। मैं इस धागे को देखता रहूंगा और रिपोर्ट करूंगा कि क्या मुझे कोई वर्कअराउंड मिल रहा है, लेकिन मुझे पूरा यकीन है कि यह ग्लिफ़ में छोटी खामियां हैं जो केवल एक बार घूमने पर सामने आती हैं, अन्यथा वे नग्न आंखों से बहुत कम दिखाई देती हैं

luxzg 16 जन॰ 2015

मैं एक ही मुद्दे से मिला हूं, क्या इसके लिए एक पुष्ट समाधान है?

tsuijie 17 जन॰ 2015

@TsuiJie नहीं, वहाँ नहीं है

tagliala 17 जन॰ 2015

मैं IE10 और 11 में झटकों / wobbling स्पिन आइकन के साथ एक समान मुद्दा था।

मेरी समस्या यह थी कि IE 10/11 में जब तक स्पिनर दिखाई दे रहा था तब तक स्क्रॉलबार दिखा रहे थे और छुपा रहे थे (स्पंदन कर रहे थे)।

मैंने जो पाया वह यह था कि आइकन टैग की ऊँचाई और चौड़ाई को एक सेट आकार (आइकन के समान आकार) में सेट करके, पुलिंग बंद हो गई।

आशा है कि यह किसी की मदद करता है।
चियर्स

MichaelMaven 22 जन॰ 2015

ठीक है, मुझे लगा है कि इस मुद्दे को फ़ॉन्ट गिलहरी रूपांतरण में webfont प्रारूपों के लिए है। ऐसा लगता है कि यह कुछ मेट्रिक्स मुंगिंग कर रहा है। मेरी योजना:

फ़ॉन्ट गिलहरी से एक ताजा संस्करण के साथ परीक्षण
यदि वह काम नहीं करता है, तो मेरे स्वयं के रूपांतरण समाधान को रोल करें

davegandy 22 जन॰ 2015

ठीक है, काफी जांच के बाद, मैंने कुछ सुधार किए:

स्पिनिंग करते समय एक बेहतर दृश्य प्रभाव के लिए अपडेटेड फ़े-स्पिनर।
होम-रोल्ड एक वेबफ़ॉन्ट रूपांतरण। फ़ॉन्ट गिलहरी निश्चित रूप से चीजों को गड़बड़ कर रही थी।
कुछ फॉन्ट मेट्रिक्स को एडजस्ट किया है जिसका जाहिर तौर पर मैक पर कोई असर नहीं होता है, लेकिन विंडोज़ द्वारा इसका काफी इस्तेमाल किया जाता है।
दृश्य परीक्षण पृष्ठ (http://fontawesome.io/test/) में एनिमेटेड उदाहरण जोड़े गए।

परिणाम

रेटिना मैक: क्रोम, सफारी और फ़ायरफ़ॉक्स में निर्दोष
गैर-रेटिना मैक: क्रोम, सफारी और फ़ायरफ़ॉक्स में बेहतर है
विंडोज 7: IE11 निर्दोष दिखता है, क्रोम 39 में अभी भी समस्याएं हैं, लेकिन मुझे नहीं लगता कि यह किसी भी तरह से बदतर था

एक कैविएट

कुछ फ़ॉन्ट आकारों में, सभी ब्राउज़रों में थोड़ी-सी छेड़छाड़ होती है (Icomoon में एक ही मुद्दा है)। मूल रूप से, यदि आप इसे अनुकूलित रिज़ॉल्यूशन के गुणक और आधा गुणक (जैसे 14px, 21px, 28px, 35px) के लिए रखते हैं, तो डगमगा जाता है।

चूंकि परिणाम उनके मुकाबले बहुत बेहतर थे, मैं 4.3 के लिए इस स्वीकार्य को कॉल करने जा रहा हूं, और 5.0 के लिए मुद्दे को खुला रखता हूं।

davegandy 22 जन॰ 2015

एक और अपडेट। मुझे पता लगा कि फ़ॉन्ट गिलहरी रूपांतरण के लिए कौन सा चयनित विकल्प अच्छी तरह से काम नहीं कर रहा है। इसलिए मैंने उन फाइलों को वापस रख दिया। खुला छोड़ दिया।

davegandy 22 जन॰ 2015

@davegandy , मैं फ़ायरफ़ॉक्स और क्रोम के साथ विंडोज़ पर अपनी तरफ से कोई सुधार नहीं देख रहा हूँ। मैं IE11 की कोशिश नहीं की। यदि आप एनीमेशन में चरणों का उपयोग करते हैं तो आप स्पष्ट रूप से डगमगा सकते हैं।

मैं समझता हूं कि आप 4.x शाखा पर बहुत कुछ नहीं कर सकते हैं, लेकिन क्या 5.x शाखा के लिए कोई ठोस समाधान है?

.fa-spin2 {
    animation: fa-spin 1s infinite steps(8);
    -webkit-animation: fa-spin 1s infinite steps(8);
    -moz-animation: fa-spin 1s infinite steps(8);
    -o-animation: fa-spin 1s infinite steps(8);
}

alexandrejobin 22 जन॰ 2015

किसी और के लिए जिसने इसे अभी तक बनाया है, और कुछ समस्या निवारण की तलाश कर रहा है:

fa-spin और fa-fw एक साथ उपयोग न करें।

यह मेरी समस्या (और मेरा समाधान) निकला।

qJake 24 जन॰ 2015

👍3

@skoub

IE11 लगभग सही है, विंडोज़ में IMHO सबसे अच्छा है।

स्पिनर आइकन नया है और यह पहले से बेहतर होना चाहिए।

सभी ब्राउज़रों के साथ इस भारी पृष्ठ के निचले भाग पर एक नज़र डालें: http://fontawesome.io/test/

क्रोम और फ़ायरफ़ॉक्स छोटे आकारों में वास्तव में खराब हैं: निराश:

tagliala 25 जन॰ 2015

IE11 के साथ, पिता-पल्स के साथ, थोड़ा गड़बड़ है। यह ऐसा है जैसे कि स्पिनर 1px ऊपर बढ़ रहा है और अगले एनीमेशन कदम पर नीचे जाता है।

alexandrejobin 31 जन॰ 2015

यह IE 11 और क्रोम 40.0.2214.115 मीटर पर मेरे लिए काम कर रहा है, लेकिन यह फ़ायरफ़ॉक्स 35.0.1 में लड़खड़ा रहा है।

bphamous 23 फ़र॰ 2015

लिनक्स के लिए फ़ायरफ़ॉक्स 36 में अभी भी ध्यान देने योग्य है।

वीडियो 50 एफपीएस पर दर्ज किया गया है।

BreadMaker 25 फ़र॰ 2015

लिनक्स पर फ़ायरफ़ॉक्स 36 के लिए scaleZ(1.001) जोड़ना समस्या को हल करता है।

natewiebe13 25 फ़र॰ 2015

सुनिश्चित नहीं है कि अगर मेरी समस्या सभी के समान थी, तो यह समस्या # 4017 की तरह लग रहा था, लेकिन यह बंद हो गया और यहां पुनर्निर्देशित हो गया, इसलिए मैं यहां अपना समाधान पोस्ट करूंगा।

लगता है अगर आप बस .fa- स्पिन वर्ग में निम्नलिखित जोड़ते हैं।

.fa-spin {
    text-align:center;
}

मेरे लिए wobbliness तय करने के लिए लगता है।

JakeCooper 27 फ़र॰ 2015

न तो फ़िक्स -फिक्स्ड चाहिए और न ही : सेंटर @JakeCooper इसे मेरे लिए ठीक करता है:
filter

(बिना स्पिन के, कोई घबराना नहीं है)।

isaksky 5 मार्च 2015

@isaksky क्या आप इस मुद्दे को दिखाते हुए एक बेला प्रदान कर सकते हैं? मेरे पास विचार है

tagliala 5 मार्च 2015

@tagliala यहाँ तुम जाओ:

http://codepen.io/isaksky/pen/JoBqoM

isaksky 5 मार्च 2015

Chrome 40.0.2214.115, विंडोज 7. प्रदान किए गए कोडपेन पर उस समस्या को पुन: उत्पन्न नहीं कर सकता है।

कौन सा ब्राउज़र आपको वह आउटपुट दे रहा है?

tagliala 6 मार्च 2015

मैं अभी अपने काम के कंप्यूटर पर नहीं हूं, लेकिन मेरा मानना है कि यह विंडोज 8 पर नवीनतम सामान्य क्रोम है। मैं क्रोम में इस मैक पर इसे सामान्य रूप से यहां पुन: पेश नहीं कर सकता, लेकिन अगर मैं 110% या 125% के लिए ज़ूम इन करता हूं उदाहरण, यह दिखाता है। (एक समस्या यह भी है कि जहाँ मेरे बटन लंबवत खड़े होते हैं, लेकिन यह समस्या मेरे मतलब की नहीं है (मुझे लगता है कि मैं इसे ठीक कर सकता हूँ)। यदि आप ज़ूम के साथ गड़बड़ करते हैं तो क्या घबराना आपके लिए होता है?

isaksky 6 मार्च 2015

मैं इसे सामान्य पर होने के लिए मिला (100%) इस मैक पर भी ज़ूम करें। जूम और / या ब्राउज़र टैब को स्विच करने से संबंधित लगता है। Btw मुद्दा भी $('#spin-pls').toggleClass("fa-spin") साथ होता है, (पहले से ही कताई करते समय इस पर 'छिपाना' के बजाय) जो इसे थोड़ा और स्पष्ट कर सकता है जहां समस्या है।

isaksky 6 मार्च 2015

मैं कल अपने मैक के साथ जाँच करूँगा

tagliala 6 मार्च 2015

मुझे यहाँ एक कताई पर काम करना है। जब आप मँडराते हैं तो अच्छा और चिकना होता है।

http://codepen.io/jesseangelo/pen/KwrqdM?editors=010

मैंने एक कीफ्रेम एनीमेशन बनाया जो केवल 30 डिग्री ( rotateFa नीचे) घूमता है। तब मुझे लगता है कि यह animation: rotateFa .1s infinite;

<strong i="11">@keyframes</strong> rotateFa {
    from { transform: rotate(0deg); }
    to { transform: rotate(30deg); }
}

और इसके विपरीत उलट वापस

<strong i="15">@keyframes</strong> unRotateFa {
  from { transform: rotate(30deg); }
  to { transform: rotate(0deg); }
}

jesseangelo 19 मार्च 2015

समस्या अभी भी मौजूद है।

Haleddo 21 मार्च 2015

यह अभी भी हार्डवेयर त्वरण अक्षम मोड के मामले में मौजूद है। फ़ायरफ़ॉक्स 36.0.4।

ypsilonmeister 27 मार्च 2015

कृपया +1 न करें या पुष्टि करें कि यह समस्या अभी भी मौजूद है, क्योंकि यह मुद्दा खुला है और क्योंकि हम नहीं जानते कि कैसे ठीक करें।

कृपया यहाँ देखें: https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -65381998

tagliala 27 मार्च 2015

शायद उदाहरण पृष्ठ पर सिर रखना एक अच्छा विचार होगा? यह मुद्दा मेरे लिए एनिमेटेड आइकनों से बहुत सावधान रहने के लिए काफी बड़ा है, लेकिन https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -71056820 के अनुसार, आप रेटिना मैक पर नोटिस करेंगे - भले ही आपने सभी प्रमुख ब्राउज़रों पर परीक्षण किया हो।

Vusys 8 जून 2015

@Vusys मैं सहमत हूँ। आप मास्टर शाखा के खिलाफ एक पीआर भेज सकते हैं या मुझे बता सकते हैं कि मुझे क्या लिखना है और मैं इसे करूंगा

tagliala 8 जून 2015

@tagliala ने पुल अनुरोध # 6686 के साथ किया जो उदाहरणों के नीचे निम्नलिखित चेतावनी जोड़ता है:

कुछ प्लेटफार्मों पर कुछ ब्राउज़रों के पास एनिमेटेड आइकन के साथ समस्याएँ हैं, जिसके परिणामस्वरूप एक घबराहट से भरा हुआ प्रभाव है। उदाहरण और संभावित वर्कअराउंड के लिए समस्या # 671 देखें।

Vusys 9 जून 2015

👍1

@Vusys धन्यवाद!

tagliala 10 जून 2015

मैं सिर्फ +/- 1 पिक्सेल की तुलना में बहुत खराब लड़खड़ाता हूं। स्पिन परिवर्तन और अन्य सीएसएस परिवर्तनों के बीच कुछ अजीब बातचीत है, ताकि कभी-कभी रोटेशन का केंद्र स्पिनर आइकन के बाहर हो।

मैंने यह नहीं बताया है कि सीएसएस नियम मेरी साइट पर अभी तक इस समस्या का कारण बन रहा है, लेकिन यह गलत परिवर्तन आदेश के एक मामले की तरह दिखता है। आदेश होना चाहिए: आइकन के केंद्र का अनुवाद (0,0) करें, फिर वर्तमान कोण से घुमाएं, फिर स्क्रीन स्थिति में अनुवाद (0,0) जिस पर केंद्र आइकन प्रदर्शित किया जाना है (या रिवर्स)। कहीं सीएसएस मिश्रण में एक और अनुवाद फेंक रहा है।

_उपडेट: _ मुझे पता चला कि मेरे मामले में समस्या क्या थी, इसलिए मैं उत्तर यहां पोस्ट करूंगा कि कोई और इससे लाभान्वित हो सकता है: मेरे पास एक सीएसएस नियम था जो 'i' तत्व की चौड़ाई को बदल रहा था कि स्पिनर में संग्रहीत किया गया था (बूट आइकन का उपयोग FA आइकनों के लिए किया जाता है)। ऐसा करना आइकन के संदर्भ के आधार पर अप्रत्याशित परिणाम देता है (उदाहरण के आधार पर पाठ केंद्रित था या नहीं)।

lukehutch 7 जुल॰ 2015

👍2

मैंने सीएसएस नियम का पालन नहीं किया है

मुझे पूरा विश्वास है कि यह एक सीएसएस नियम नहीं है और यह मुद्दा एफए से संबंधित नहीं है

यहां देखें: http://jsfiddle.net/tagliala/g0ngLhyr/

tagliala 7 जुल॰ 2015

@ तग्लियाला , अगर यह एक सीएसएस नियम या एफए से संबंधित नहीं है, तो आप कैसे समझाते हैं कि इकोमून का प्रभाव नहीं है?

डेमो: http://jsfiddle.net/cxxzh0uf/

alexandrejobin 7 जुल॰ 2015

एक और उदाहरण गूगल द्वारा बनाया गया एक है: http://www.getmdl.io/compenders/index.html#loading -suner/ner

alexandrejobin 7 जुल॰ 2015

@ आपकी http://jsfiddle.net/tagliala/cxxzh0uf/9/

यहां देखें: http://jsfiddle.net/tagliala/g0ngLhyr/

ध्यान दें कि इस फिडेल में वेबफोन्स बिल्कुल भी नहीं हैं और फिर भी वोबेल दिखाता है

tagliala 7 जुल॰ 2015

@skoub google का क्रियान्वयन webfonts और IMHO पर आधारित नहीं है जो इस सुविधा से निपटने का उचित तरीका है।

tagliala 7 जुल॰ 2015

मैं अपना अनुभव यहां साझा करना चाहता हूं।

एकल आइकन:
मुझे केवल स्टैक्ड आइकनों के साथ छेड़छाड़ की समस्या है। सिंगल आइकन स्पिन या पल्स ठीक है

स्टैक्ड आइकन:
जाहिरा तौर पर मेरी साइट पर नीचे दिए गए कोड में एक शीर्षक में डगमगाना नहीं होता है, जहां फ़ॉन्ट थोड़ा बड़ा है, लेकिन फ़ॉन्ट छोटा होने पर डगमगाने लगता है। दोनों मामलों में फैब-पल्स लड़खड़ाता है

अस्वीकरण: मैं इन सभी चीजों के लिए बहुत नया हूं, लेकिन जैसा कि मेरी साइट ने बहुत ही शानदार और अच्छे परिणाम दिए हैं, मुझे लगा कि आप सभी जानना चाहते हैं।

andrevanberlo 11 जुल॰ 2015

@isaksky स्पिनर के साथ

वे आइटम जो .hide वर्ग के साथ दिखाए / छिपाए जा रहे हैं, उस ब्राउज़र को उस सामग्री के साथ संकेतित किया जा सकता है जिसे छिपाया जाएगा

#spin-pls {
  will-change: contents;
}

हालाँकि, गेको-आधारित ब्राउज़र, जैसे फ़ायरफ़ॉक्स, कम से कम मेरे पास हैं, अभी भी संवाद बॉक्स में जंपिंग टेक्स्ट के साथ समस्याएँ हैं।

.job-order-dialog {
  will-change: transform;
}

काम करता है, लेकिन हर समय टेक्स्ट को ओवरकम्पैन्सेटिंग और धुंधला करके नकारात्मक प्रभाव डालता है। मैं दो संभावित समाधानों के साथ आया, पहला सिर्फ फ़ायरफ़ॉक्स को लक्षित करता है, बाद वाला एक अलग त्वरण है, इस बग में filter: blur(0); उल्लेख किया गया है, लेकिन मेरी राय में थोड़ा हैकी है - transform: translateZ(0); - -और भविष्य में नकारात्मक परिणामों को जन्म दे सकता है।

@-moz-document url-prefix() {
  .job-order-dialog {
    will-change: transform;
  }
}

.job-order-dialog {
  filter: blur(0);
}

toastal 15 जुल॰ 2015

यह समस्या ठीक करता है, धन्यवाद @toastal ! क्या यह एक सामान्य समाधान @tagliala में काम किया जा सकता है?

isaksky 15 जुल॰ 2015

@toastal क्या आपको अपना समाधान दिखाते हुए और बुनियादी फॉन्टवॉव स्पिन के साथ तुलना करने के लिए jsfiddle प्रदान करने का मन है?

tagliala 16 जुल॰ 2015

मैं आपके द्वारा पोस्ट किए गए उदाहरणों की कोशिश कर रहा हूं, और मैं फ़ायरफ़ॉक्स अरोरा में पुन: पेश नहीं कर सकता:

20150722004007
मोज़िला / 5.0 (X11; लिनक्स x86_64; आरवी: 41.0) गेको / 20100101 फ़ायरफ़ॉक्स / 41.0

मैं डेबियन जेसी पर हूं, और कुछ एनवीडिया ड्राइवर मुद्दों के कारण, मुझे लगता है कि मेरे पास हार्डवेयर त्वरण नहीं है।

GLXtest प्रक्रिया विफल (स्थिति 1 के साथ बाहर): GLX एक्सटेंशन गायब है
प्रोसेसेडर वेबगेल ब्लुएडेडो पैरा टू तुर्जेता ग्रैफिका डिबिडो ए प्रॉब्लमस नो रेसुएल्टोस स्ट्रास एडवोकेट।

इसके अलावा, यहाँ पुन: पेश नहीं किया जा सकता है:
http://shb.github.io/bootstrap-loading-screen/#icon : स्पिनर

क्या यह हल है, या यह इसलिए है क्योंकि मेरे पास हार्डवेयर त्वरण सक्षम नहीं है?

mautematico 23 जुल॰ 2015

मैंने इस मुद्दे के लिए एक और संभावित सुधार पाया है (फ़ायरफ़ॉक्स 39 चल रहा है) इस पोस्ट के लिए धन्यवाद: http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css -transforms /

मैंने फिक्स के साथ ऊपर JSFiddle को संपादित किया है: http://jsfiddle.net/5z9om45L/

सिर्फ ट्रांसफॉर्मेशन प्रॉपर्टी में "परिप्रेक्ष्य (1px)" डालें। यह "जीपीयू के लिए वस्तु का प्रतिपादन" फेंकता है, ऊपर पोस्ट के अनुसार। मैंने व्यक्तिगत रूप से इसका बड़े पैमाने पर परीक्षण नहीं किया है, इसलिए मुझे नहीं पता कि यह विशेष रूप से क्या करता है या यदि यह किसी अन्य मुद्दे का कारण बनता है, लेकिन अभी तक यह ठीक है। यह फ़ायरफ़ॉक्स के साथ मेरे सबसे बड़े मुद्दों में से एक रहा है, इसलिए मैंने सोचा कि मैं यहां इसका उल्लेख करूंगा।

torcado194 25 जुल॰ 2015

मैंने फिक्स के साथ ऊपर JSFiddle को संपादित किया है: http://jsfiddle.net/5z9om45L/

यह मेरे लिए समस्या को ठीक करता है।

moobee 27 जुल॰ 2015

यहां एक अपडेटेड फिडेल है जो कंपास पर वॉबलिंग दिखाता है। दूसरा पता लगाने वाला बटन स्पष्ट वोबब्लिंग के साथ एक साधारण फ़ेस-स्पिन दिखाता है।

http://jsfiddle.net/Lpur9ek1/1/

spiderr 31 जुल॰ 2015

@spiderr जाहिरा तौर पर, fa-lg वॉबल प्रभाव बढ़ाता है क्योंकि यह लाइन की ऊंचाई और फ़ॉन्ट आकार से संबंधित है। फ़ॉन्ट आकार 14px या गुणकों का उपयोग करने का प्रयास करें

tagliala 31 जुल॰ 2015

@tagliala धन्यवाद, शानदार टिप! fa-2x निश्चित रूप से बेहतर है। सर्कल के चारों ओर कुछ अजीब कलाकृतियाँ (गंदे पिक्सेल) भी हैं। यहाँ fa-5X में एक बेला है जो बड़े नीले बटन पर उन्हें और अधिक स्पष्ट रूप से दिखाता है। यह एक मिनट का विवरण है, लेकिन अगर कोई कभी कम्पास को साफ करता है, तो यह बहुत अच्छा होगा। मेरी आशा है कि जब कम्पास घूमता है, तो आप यह नहीं बता सकते थे कि चक्र घूम रहा था, केवल आंतरिक कम्पास सुई। अगर मैं स्क्रीन से 2 मीटर दूर fa-5x के साथ बैठता हूं, तो यह बहुत अच्छा लगता है :-)

http://jsfiddle.net/mhqLvw79/1/

spiderr 31 जुल॰ 2015

यकीन नहीं होता है कि यह सही धागा है, लेकिन ..
फ़ायरफ़ॉक्स में, मेरी "fa fa-cog fa-spin" कताई बंद हो जाती है। मैं इसे अजाक्स कॉल में मोडल के साथ उपयोग करता हूं। यह सफारी और क्रोम में ठीक काम करता है लेकिन किसी कारण से फ़ायरफ़ॉक्स बंद हो जाता है। कोई विचार??

एप्लिकेशन / javascripts / my_file.js
$ (दस्तावेज़)। पहले से ही (फ़ंक्शन) ({
$ ('# search_btn')। ('क्लिक', फंक्शन () {
$ ( '# परिणाम') खाली ()।;
var myForm = $ ('# user_search');
$ ( "# Spinner_modal") मॉडल ( "शो")।;
.ajax $ ({
url: myForm.attr ('एक्शन'),
प्रकार: "पोस्ट",
डेटा: myForm.serialize (),
डेटा टाइप: 'टेक्स्ट',
सफलता: फ़ंक्शन (html) {
$ ( "# Spinner_modal") मॉडल ( "छिपाएँ")।
$ ( '# परिणाम') संलग्न (एचटीएमएल)।
},
त्रुटि: फ़ंक्शन (xhr, satus, इरेट) {
$ ( "# Spinner_modal") मॉडल ( "छिपाएँ")।
},
टाइमआउट: 60000
});
विवरण झूठा है;
});

_my_partial.html.erb

jonathanparrish 11 अग॰ 2015

@jonathanparrish कृपया एक नया मुद्दा शुरू करें। मुझे उल्लेख करने की चिंता मत करो, मैं देख लूंगा :)

tagliala 12 अग॰ 2015

मैंने आइकन फ़ॉन्ट के केंद्र-बाहर रोटेशन के साथ अपनी समस्या को कैसे हल किया:
कई मुद्दे थे जिनका मुझे समाधान करना था:
1. आइकन का आकार: यह पूरे px आकार का होना चाहिए (जैसे फ़ॉन्ट-आकार: छोटा; मेरा आइकन 17.5px बनाता है इसलिए केंद्र परिवर्तन के लिए पूर्ण केंद्र नहीं है)
2. डिफाइनिंग डिस्प्ले: आइकन लेवल पर ब्लॉक करने से यह पेरेंट डिव के बीच में सही ढंग से केंद्र बनाता है
3. पैरेंट डिव (मेरे केस बटन में) और निश्चित पैडिंग के सटीक वर्ग आकार को परिभाषित करते हुए इसे सही ढंग से केंद्र बनाया
4. किसी भी पाठ-छाया को जोड़ने से आंतरिक आइकन का आकार बदल जाएगा, इसलिए यह केंद्र से बाहर हो जाएगा। ट्रिक होवर स्टाइल को बदलने के लिए है जो मेरे मामले में पृष्ठभूमि के समान रंग के साथ एक ही छाया है

तो यहाँ कोड है:

button.close {
    padding: 10px;
    opacity: 0.8;
    text-shadow: 1px 1px 1px #999; 
    width: 40px;
    height: 40px;
}
button.close i{
    font-size: 20px;
    max-width: 20px;
    max-height: 20px;
    display: block;
}
button.close:hover {
    text-shadow: 1px 1px 1px #fff; 
}
/* rotation CSS*/
<strong i="12">@keyframes</strong> anim-rotate {
    0% {
        -moz-transform:rotate(0);
        -webkit-transform:rotate(0);
        transform:rotate(0);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
<strong i="13">@keyframes</strong> anim-rotate-next {
    0% {
        -moz-transform:rotate(0);
        -webkit-transform:rotate(0);
        transform:rotate(0);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.rotate{
    animation: anim-rotate-next 1s normal linear;
}
.rotate.down{
    animation: anim-rotate 1s normal linear;
}

HTML:

<div id="NewsTitle" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div>
            <button type="button" class="close visible-sm-block hidden-xs"><i class="fa fa-expand"></i></button>
            <button type="button" class="close"><i class="fa fa-chevron-up"></i></button>
            <button type="button" class="close"><i class="fa fa-refresh rotate"></i></button>
            <span>Vesti</span>
        </div>
    </div>

और अंत में घूर्णन वर्ग को बदलने के लिए JQuery

$("#NewsTitle").on('click', 'i.fa-refresh', function () {
    // rotiraj ikonu
    $(this).toggleClass("down");
});

https://jsfiddle.net/4ya23yjL/8/

goranbujic 1 अक्तू॰ 2015

इसे साझा करने के लिए

क्या आप अपना दृष्टिकोण दिखाते हुए एक फील कर सकते हैं (आप इसे आधार के रूप में इस्तेमाल कर सकते हैं http://jsfiddle.net/tagliala/4ya23yjL/) और अपनी पोस्ट को ठीक से प्रारूपित कर सकते हैं ?

धन्यवाद!

tagliala 1 अक्तू॰ 2015

बस यह किया ... खेद gitHub पर पहले एक :)

दिनांक: गुरु, 1 अक्टूबर 2015 07:53:45 -0700
प्रेषक: सूचनाएं@github.com
To: [email protected]
CC: [email protected]
विषय: पुन: [फ़ॉन्ट-विस्मयकारी] प्रतिपादन मुद्दा: आइकन-स्पिन फ़ेस-स्पिन शेक / वोबबल (क्रोम फ़ायरफ़ॉक्स) (# ६ )१)

इसे साझा करने के लिए

क्या आप अपना दृष्टिकोण दिखाते हुए एक फिडेल बना सकते हैं (आप इसे आधार के रूप में इस्तेमाल कर सकते हैं

धन्यवाद!

-
इस ईमेल का उत्तर सीधे दें या इसे GitHub पर देखें।

goranbujic 1 अक्तू॰ 2015

आप सभी लोगों को प्यार। transform-origin: 49% 48.5%; .fa-refresh.fa-spin 3 पर फिक्स के लिए धन्यवाद

लेकिन गंभीरता से, उन चीजों को सहानुभूतिपूर्वक प्राप्त करना पसंद करेंगे यदि वे एनिमेटेड होने जा रहे हैं!

tomasdev 22 दिस॰ 2015

अगर मेरे जैसे आयनिकों के लिए यहां कोई भी है, तो यह transform-origin: 52% 50%; चाल करेगा

im4aLL 27 फ़र॰ 2016

इस मुद्दे की पुष्टि करना

Google Chrome:  51.0.2662.0 (Officiell version) canary (64 bitar)
Version:    4d223c72fe4e76c7404bffb662f742b947f97107-refs/heads/master@{#378134}
OS  Mac OS X

उर्फ नवीनतम क्रोम कैनरी, यह केवल fa-pulse कठिन के लिए लागू होता है (मुख्य रूप से fa fa-spinner fa-pulse साथ परीक्षण किया गया)

swantzter 2 मार्च 2016

इससे पहले v4.5.0 पर मुझे स्पिनर पर वॉबलिंग मुद्दे को ठीक करने के लिए निम्नलिखित सीएसएस शैली को जोड़ना था:

.fa.fa-spinner.fa-pulse {
  transform-origin: 50% 48.5%;
}

हालाँकि 4.6.1 पर सीएसएस ने वास्तव में इसे बदतर बना दिया। 4.6.1 लगता है कि स्पिनर के लिए लड़खड़ाती समस्या का समाधान हो गया है।

gnail 21 अप्रैल 2016

इस एक के विषय में:

http://jsfiddle.net/tagliala/g0ngLhyr/

सवाल यह है कि क्या यह चीज़ मृत केंद्र है या नहीं, विशेष रूप से इस बात के बारे में कि सिस्टम पर जो भी फ़ॉन्ट उपलब्ध है उसका उपयोग करता है।
यह एक छवि या एक SVG को अट्रैक्टिव कर सकता है जिसके पास एक परफेक्ट डेड-सेंटर्ड सर्कल है और उस स्पिन को जाने दें।

अपडेट करें:
http://jsfiddle.net/xntwxwra/
यह यहाँ नहीं लगता है ([email protected]) बस कोई विरोधी aliasing शायद यह थोड़ा अजीब लग रहा है।

My1 21 अप्रैल 2016

यह मदद कर सकता है या नहीं। मेरे पास क्रोम में ०१.०.२. a०४.१०३ मीटर का एक वॉबल था, और मेरे टेम्पलेट के साथ आने वाली सीएसएस को letter-spacing: 0.25em; सेट किया गया था। फ़ेस-स्पिन वर्ग के लिए, मैं इसे letter-spacing: normal; और वॉइला के लिए रीसेट करता हूं, कोई डगमगाता नहीं है!

pilotandy 19 जुल॰ 2016

👍3 🎉1

मुझे यकीन नहीं है कि अगर हम एक ही चीज़ के बारे में बात कर रहे हैं, लेकिन मैंने देखा कि <i class="fa fa-pulse fa-spinner fa-fw"</i> small तत्व के भीतर उपयोग किए जाने पर उछल-कूद करता है। मैं एक सीएसएस नायक नहीं हूं, इसलिए मैंने इसे span (और इस प्रकार small निकालकर) में लपेटकर इसे "हल" कर दिया।

मैं netdna.bootstrapcnd.com से 3.3.7 बूटस्ट्रैप के साथ maxcdn.bootstrap.com से भययोग्य 4.6.3 का उपयोग कर रहा हूं।

bastbnl 3 सित॰ 2016

मैं मूल तत्व के फ़ॉन्ट आकार को बदलते समय मज़बूती से छेड़छाड़ को पुन: उत्पन्न कर सकता हूं। क्रोम ब्राउजर में इस फिडेल में, लेफ्ट स्पिनर तय होने के दौरान लेफ्ट स्पिनर लड़खड़ा रहा है।

stenno 13 सित॰ 2016

"फ़िक्सेस" की मात्रा का उपयोग लोग मेरी चिंता कर रहे हैं, यदि बहुत सारे "फ़िक्सेस" हैं, तो लोग पोस्ट कर रहे हैं कि सभी ब्राउज़रों में काम करने के लिए वास्तव में कितने परीक्षण किए गए हैं।

अगर ग्लिफ़ सममित रूप से इस तरह से नहीं लगाया गया है कि ऊपर और नीचे के बीच का अंतर अलग-अलग है, तो जैसा कि वर्णित है "वॉबल" होगा।

यह पहले से ही सुझाव दिया गया है कि ग्लिफ़ को रीमेक करना बहुत काम है, इसलिए केवल एक छवि (जैसे कि एसवीजी) का उपयोग क्यों न करें जो कताई आइकन के लिए बेहतर होगा? आपको अपनी सभी समस्याओं को हल करने के लिए Font Awesome का उपयोग करने की आवश्यकता नहीं है और कभी-कभी ऐसा करने का कोई मतलब नहीं होता है।

Matthew-Bonner 14 सित॰ 2016

👍7

उबंटू ज़ेनियल 16.04 के तहत फ़ायरफ़ॉक्स 48 से फ़ायरफ़ॉक्स 49 के उन्नयन के बाद वॉबलिंग प्रभाव दिखाई दिया।
जैसा कि इस सूत्र में सुझाया गया है, "लाइन-ऊंचाई: सामान्य" के अतिरिक्त द्वारा तय किया गया था।

vizzah 26 सित॰ 2016

👍2

@ मैथ्यू-बोनर तो, अगर यह इस उद्देश्य के लिए उपयुक्त नहीं है, तो इसे प्रलेखन से हटा दिया जाना चाहिए!

mehrandvd 8 जन॰ 2017

@mehrandvd कुछ आइकन पूरी तरह से ठीक काम करते हैं, इसलिए इसे कवर करने के लिए प्रलेखन क्यों है, हो सकता है कि दस्तावेज़ को अपडेट करने के लिए यह स्पष्ट करना बेहतर होगा कि कुछ आइकन अन्य लोगों के साथ भी काम नहीं करते हैं और ज्ञात मुद्दे हैं।

Matthew-Bonner 10 जन॰ 2017

@ मैथ्यू-बोनर यह एक अच्छा विचार है और यह आंशिक रूप से प्रलेखित है।

कुछ प्लेटफार्मों पर कुछ ब्राउज़रों के पास एनिमेटेड आइकन के साथ समस्याएँ हैं, जिसके परिणामस्वरूप एक घबराहट से भरा हुआ प्रभाव है। उदाहरण और संभावित वर्कअराउंड के लिए समस्या # 671 देखें।

यदि आपके पास इस वाक्य को बेहतर बनाने का सुझाव है, तो बेझिझक मास्टर शाखा के खिलाफ पीआर सबमिट करें

tagliala 10 जन॰ 2017

@tagliala मैं करूंगा, और मुझे लगता है कि दिया गया फ़ॉन्ट विस्मयकारी 5 विकसित किया जा रहा है, इस बग को बिस्तर पर रखकर इसे बंद करना चाहिए और "wontfix" लेबल को जोड़ना चाहिए क्योंकि वास्तव में ऐसा कुछ भी नहीं है जो किया जा सकता है।

Matthew-Bonner 11 जन॰ 2017

👍1

मुझे पता चला कि वोबलिंग प्रभाव फ़ॉन्ट-आकार पर निर्भर करता है।
उदाहरण के लिए, मैंने फ़ॉन्ट आकार 1.5em को 1.4em और 21px को 20px और वॉइला में बदल दिया, अब कोई छेड़छाड़ नहीं करता।

ruwen-m 11 जन॰ 2017

👍4

मैंने सर्कल-ओ-नॉट आइकन को इसके एसवीजी संस्करण द्वारा प्रतिस्थापित करके (गैर-वर्ग अनुपात के सुधार के साथ) अपने मुद्दे को हल किया।

यहाँ इसके लिए एक पहेली है: https://jsfiddle.net/vwqzv1mr/5/

Donaldini 9 मार्च 2017

मुझे सभी ब्राउज़र (IE, FF, Chrome, Safari) के साथ एक ही समस्या (2017) है। एक स्पिनर को केंद्रित रखने के लिए इसकी इतनी बड़ी समस्या नहीं थी।

Taygair 17 मई 2017

👍1

मैं एक अभियान शुरू कर रहा हूं, जो मुक्त, खुले स्रोत के लिए एफए आइकन के शीर्ष अनुरोधों को दूर कर रहा है। आप उन्हें कई तरीकों से शामिल कर सकते हैं: एक और फ़ाइल में सभी एफए और तीसरे पक्ष के आइकन को संकलित करते हुए एक और आइकन फ़ॉन्ट, svg सेट, या (मेरी प्राथमिकता) उत्पन्न करना।

विभिन्न स्पिन आइकन यहां हैं ।

पहले वाले मॉडरेटर , कलह , सिक्के , Google Play , पतले करीबी , चलने वाले आदमी , टी-शर्ट , Xbox , निनटेंडो Wii U , निन्टेंडो , प्लेस्टेशन , फेसबुक मैसेंजर और लाइन आइकन थे।

कृपया मुझे बताएं कि क्या आप चाहते हैं कि मैं इन आइकन अनुरोधों को जारी रखूं, या कुछ अपग्रेड फ़ाइल संकलित करूं, या हमें यह कैसे करना चाहिए?

visualpharm 27 मई 2017

किनारे नहीं अगर यह मदद करेगा, लेकिन मैं सीएसएस के साथ एक सा fiddling द्वारा स्पिनर को स्थिर बनाने में कामयाब रहा। मैंने दोनों ग्लिफ़िकन्स और FontAwesome फोंट का परीक्षण किया, बस देखने के लिए चुड़ैल एक बेहतर दिख रही थी। मैंने आइकन को घुमाने और कंटेनर को आइकन और आइकन के साथ घुमाने की कोशिश की। इस कार्य को करने के लिए 5 मुख्य पैरामीटर हैं (फ़ॉन्ट-आकार, ऊँचाई, चौड़ाई, रेखा ऊँचाई और पाठ इंडेंट)।

आप यहां देख सकते हैं और उदाहरण दे सकते हैं:
https://jsfiddle.net/Dhanck/syb9qubj/2/

संस्करण 5 के लिए आगे देख !!

Dhanck7 6 जुल॰ 2017

@ धनक 7 : इसे साझा करने के लिए धन्यवाद! इसे काम करने के लिए CSS orgy की क्या आवश्यकता है! बीच में मुझे एक सरल एनीमेशन मिला "बाहर" फ़ॉन्ट बहुत बढ़िया है जो बॉक्स से बाहर काम करता है!

फिर भी विश्वास नहीं हो सकता है कि उन्होंने किकस्टार्टर से फ़ॉन्ट विस्मयकारी 5 के लिए 1 मिलियन से अधिक प्राप्त किया है, लेकिन एक साधारण एनीमेशन को ठीक से काम करने में असमर्थ हैं। विलाप

Taygair 6 जुल॰ 2017

साथ ही आप पहले से ही इन एनिमेशन को काफी जटिल देख सकते हैं, यह इतनी आसानी से काम नहीं करता है।

समस्या यह है कि हम पात्रों के साथ काम कर रहे हैं, उर्फ पाठ, न कि वे चित्र जो इसे और अधिक जटिल बनाते हैं।

My1 6 जुल॰ 2017

और इस तरह से कैसे:
https://jsfiddle.net/Dhanck/9t6y85jx/2/

बस एक 3 मापदंडों को समायोजित करने और FontAwesome से डिफ़ॉल्ट एनीमेशन व्यवहार का उपयोग कर ...

मुझे लगता है कि लाइन गैप प्रॉपर्टी को हटाने के लिए आप जावास्क्रिप्ट का भी इस्तेमाल कर सकते हैं।

Dhanck7 6 जुल॰ 2017

ठीक है, सब लोग।

क्षितिज पर संस्करण 5 के साथ मुझे लगता है कि हमने इसे नए एसवीजी ढांचे के साथ तय किया है। मैंने सिर्फ नए एसवीजी "कॉग" का उपयोग करके परीक्षणों की एक बैटरी बनाई और स्पिन पूरी तरह से दर्जनों ब्राउज़रों में केंद्रित है जिन्हें मैंने परीक्षण किया था।

यदि आपने किकस्टार्टर या पूर्व-क्रम का समर्थन किया है और आपके पास नवीनतम अल्फा रिलीज़ (आपके खाते के भीतर से डाउनलोड के लिए उपलब्ध है) तक पहुंच है, तो क्या आप मुझे इसका परीक्षण करने में मदद कर सकते हैं?

मैं इस मुद्दे को फ़ॉन्ट विस्मयकारी 5 के साथ बिस्तर पर रखना पसंद करूंगा!

robmadole 3 अग॰ 2017

🎉2 👍2

सुन कर खुशी हुई! मैंने फ़ॉन्ट विस्मयकारी 5 का समर्थन नहीं किया है, लेकिन मैं इसे रिलीज के बाद खरीदने के लिए तैयार हूं। क्या Font Awesome 5 के सभी आइकनों की ऊँचाई और चौड़ाई समान है? यह कभी-कभी मेरे जीयूआई को अलग-अलग ऊंचाई / चौड़ाई से खराब कर देता है।

Taygair 3 अग॰ 2017

@ टायगैर के आइकनों की ऊंचाई समान होती है लेकिन चौड़ाई भिन्न होती है।

robmadole 7 अग॰ 2017

मुझे पता है ... फ़े-रोटेट का उपयोग करने पर ऊँचाई चौड़ाई और वीज़ा वर्सा में बदल जाती है। कुछ आइकन ऐसे हैं जो नेत्रहीन हैं - समान ऊंचाई और चौड़ाई (सममित वाले) लेकिन वे नहीं हैं। यह अच्छा होगा यदि उनकी समान ऊंचाई / चौड़ाई (FA5 में) होगी।

Taygair 7 अग॰ 2017

मैं देख रहा हूं कि यह संभवत: आगामी FA, रिलीज में तय होने जा रहा है, लेकिन सिर्फ मामले में smb को .fa-circle-o-notch लिए त्वरित सुधार की आवश्यकता है, यहां थोड़ा गंदा सीएसएस प्रतिस्थापन है

.loader {
  width: 1em;
  height: 1em;
  border: .1em solid black;
  border-right-color: transparent;
  border-radius: 50%;
  animation: fa-spin 2s infinite linear;
}

afanasy 21 सित॰ 2017

अब तक यह एसवीजी ढांचे के साथ अच्छी तरह से काम करता प्रतीत होता है। बंद करना जब तक किसी को यह गलत नहीं लगता।

robmadole 11 अक्तू॰ 2017

एसवीजी ढांचे के साथ अच्छी तरह से काम करना

यदि वेबफोन्स अभी भी प्रभावित हैं और FA5 मुक्त भी प्रभावित होंगे, तो मुझे इसे वॉन्टफिक्स के रूप में लेबल करना चाहिए और कताई माउस के लिए एक svg समाधान पर विचार करने की सलाह देना चाहिए

tagliala 20 अक्तू॰ 2017

@tagliala ने सहमति जताई। मुझे डर है कि वेब फोंट हमेशा इस मुद्दे के आसपास से ग्रस्त होंगे इसलिए एसवीजी सबसे अच्छा समाधान है अगर यह एक मुद्दा है। जैसे ही हम कर सकते हैं हम FA5 मुक्त बाहर होगा।

robmadole 20 अक्तू॰ 2017

👍2

अच्छी तरह से SVG फ्रेमवर्क खराब नहीं है, लेकिन एक कष्टप्रद बात है: जावास्क्रिप्ट।

कई कारण हैं कि ppl सामानों से खुद को बचाने के लिए noscript जैसी चीजों का उपयोग करते हैं और जब सामान JS के साथ काम नहीं करता है तो वह बदसूरत imo होता है।

मेरा मतलब है कि हमारे पास @ फॉन्ट-फेस और सीएसएस एनिमेशन और व्हाट्सएप जैसी चीजें हैं ताकि जेएस को इन जैसे कामों की जरूरत नहीं रहे और यह अच्छी बात है।

My1 21 अक्तू॰ 2017

क्षमा करें, 😢

वॉन्टफिक्स के रूप में लेबल किया गया है, लेकिन यह वास्तव में "ठीक नहीं कर सकता है"

टी एल; डॉ
कृपया सुनिश्चित करें कि आप अपने स्पिनर के लिए 16px (FA4 के लिए 14px) के एक फॉन्ट साइज़ मल्टीपल का उपयोग कर रहे हैं। यह मदद करता है ।
यदि आप संतुष्ट नहीं हैं और आपको एक पिक्सेल सही स्पिनर की आवश्यकता है, तो कृपया एक एनिमेटेड एसवीजी स्पिनर का उपयोग करने पर विचार करें।

tagliala 21 अक्तू॰ 2017

👍6

@ My1 , आपको SVG को चेतन करने के लिए JS की आवश्यकता नहीं है, आप CSS का उपयोग कर सकते हैं।

PeterShaggyNoble 21 अक्तू॰ 2017

अच्छा कॉल @tagliala ... "ठीक नहीं कर सकता" अधिक सटीक है। मैंने कई बार _tried_ कई बार: D

robmadole 21 अक्तू॰ 2017

अच्छी तरह से लेकिन एसवीजी फ्रेमवर्क केवल जेएस-सक्षम ब्राउज़र में लोड होगा।

मैंने पहले ही कोशिश की।

यदि आपके पास एफए प्रो है, तो डेमो सर्वर प्राप्त करें, जेएस (क्रोम में करना आसान) और पहुंच को अक्षम करें

http: // localhost : 3344 / डॉक्स / एसवीजी-फ्रेमवर्क। html

आप देखेंगे कि कोई भी आइकन लोड नहीं होगा।

आप शायद अकेले एसवीजी कर सकते हैं, लेकिन मेरी प्रतिक्रिया एसवीजी फ्रेमवर्क कहने वालों के प्रति ठीक थी।

यह भी किसके पास यह मुद्दा है? मैं फ़ायरफ़ॉक्स क्रोम और ओपेरा में @tagliala लिंक की कोशिश की और बहुत

भी faa fa5 यह 16px तब आधार आकार परिवर्तन coz होगा?

My1 21 अक्तू॰ 2017

यह एक बहुत बड़ी समस्या कैसे है

FreezePhoenix 22 दिस॰ 2017

👎6 👍5

एक नकारात्मक पाठ-इंडेंट मूल्य का उपयोग करना मेरे लिए समस्या तय करता है

andreobriennz 30 जन॰ 2019

🎉1

लगता है जैसे filter: blur(0) काम करता है और यह बहुत अच्छी तरह से समर्थित है https://caniuse.com/#feat = css-filter

domenkozar 22 जुल॰ 2019

👍2

@Andreobriennz के समाधान के संयोजन और प्रत्येक आकार के लिए line-height सेट करने से मेरे लिए बहुत अच्छे परिणाम प्राप्त होते हैं। अभी भी एक बहुत मामूली उप-पिक्सेल डगमगाता है लेकिन मूल रूप से ध्यान देने योग्य नहीं है।

.fa-spin {
  text-indent: -0.000001em;
  line-height: 0.6em;
}
.fa-spin.fa-lg {
  line-height: 0.7em;
}
.fa-spin.fa-2x {
  line-height: 0.8em;
}
.fa-spin.fa-3x,
.fa-spin.fa-4x,
.fa-spin.fa-5x {
  line-height: 1em;
}

camslice 15 जून 2020

👍2

Font-awesome: रेंडरिंग मुद्दा: आइकन-स्पिन fa-spin शेक / वोबबल (क्रोम फ़ायरफ़ॉक्स)

✋ कृपया https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -338336059 w पढ़ें

सबसे उपयोगी टिप्पणी

सभी 147 टिप्पणियाँ

संबंधित मुद्दों