सफारी

Question

में फॉन्ट-विस्मयकारी आइकन स्टैकिंग समस्या मुझे अपने फ़ॉन्ट भयानक आइकन के साथ यह अजीब समस्या है। मैं चाहता था कि मेरे आइकन एक गोल सीमा हो। मैं border: 1px solid का उपयोग नहीं करना चाहता क्योंकि आइकन सीमा धुंधली दिखाई देगी। मैं फ़ॉन्ट भयानक रूप से "stacking method" द्वारा इस चिकनी सीमा प्राप्त कर ली है वर्णित here

के बाद से मेरे फ़ॉन्ट 64px बड़ी है, इस fa-circle-thin प्रतीक सीमा भी मोटी है। इससे बचने के लिए मैंने box-shadow का उपयोग किया।

मेरी समस्या यह है कि मेरी आइकन सीमा समान नहीं है।

क्रोम में, सीमा बाईं ओर एक छोटे से मोटी है। (किसी तरह मैं बेला में इस मुद्दे को दोहराने नहीं कर सकता/टुकड़ा है जो इतना उपेक्षित किया जा सकता है।)

लेकिन सफारी में , सीमा दाएं तरफ मोटी है।

कैसे इस मुद्दे से छुटकारा पाने के लिए? मैं -webkit-text-stroke का उपयोग नहीं करना चाहता क्योंकि इसमें सीमित ब्राउज़र समर्थन है। किसी भी मदद की बहुत सराहना कर रहा है :)

FIDDLE

यहाँ मेरी कोड है।

a{ 
 
    text-decoration: none; 
 
} 
 
.social-block .fa { 
 
    font-size: 64px; 
 
} 
 

 
span.fa-stack { 
 
    width: 64px; 
 
    height: 64px; 
 
} 
 

 
.social-block .fa-stack-1x:before { 
 
    font-size: 24px; 
 
    vertical-align: top; 
 
    line-height: 64px; 
 
} 
 
.social-block .fa-stack-1x{ 
 
    box-shadow: inset 0 0 0px 7px #fff; 
 
    position: absolute; 
 
    top: -1px; 
 
} 
 
.social-block a:hover .fa-stack-1x{ 
 
    box-shadow: none; 
 
} 
 
.social-block a:hover .fa-stack-1x:before { 
 
    width: 50px; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    left: 7px; 
 
    top: 7px; 
 
    position: absolute; 
 
} 
 

 
.social-block .fa { 
 
    color: #CC1E4A; 
 
    border-radius: 50%; 
 
    -webkit-transition: all ease .25s; 
 
    -moz-transition: all ease .25s; 
 
    -o-transition: all ease .25s; 
 
    transition: all ease .25s; 
 
    font-size: 64px; 
 
} 
 

 
.social-block a:hover .fa-circle-thin { 
 
    background: none; 
 
} 
 
.social-block a:hover .fa-stack-1x:before { 
 
    background: #CC1E4A; 
 
    display: block; 
 
    border-radius: 50%; 
 
} 
 
.social-block a:hover .fa-stack-1x { 
 
    color: #fff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="social-block"> 
 
    <a href="#"> 
 
     <span class="fa-stack fa-lg"> 
 
     <i class="fa fa-circle-thin fa-stack-2x"></i> 
 
     <i class="fa fa-facebook fa-stack-1x"></i> 
 
    </span> 
 
    </a> 
 
    <a href="#"> 
 
     <span class="fa-stack fa-lg"> 
 
     <i class="fa fa-circle-thin fa-stack-2x"></i> 
 
     <i class="fa fa-twitter fa-stack-1x"></i> 
 
    </span> 
 
    </a> 
 
    <a href="#"> 
 
     <span class="fa-stack fa-lg"> 
 
     <i class="fa fa-circle-thin fa-stack-2x"></i> 
 
     <i class="fa fa-linkedin fa-stack-1x"></i> 
 
    </span> 
 
    </a> 
 
</div>

Answer 1

आप वर्तमान फ़ॉन्ट के वजन को बदल नहीं सकते बहुत बढ़िया आइकन, हालांकि डिजाइनर ने मल्टी-वेट आइकन फ़ॉन्ट्स का एक व्यावसायिक सेट भी बनाया जिसे कहा जाता है, जिसमें प्रकाश फ़ॉन्ट शामिल है।

स्टैक्ड आइकनों की बजाय कामकाज के रूप में, मैं सामान्य आइकन का उपयोग करने और border-radius के साथ मंडलियों को आकर्षित करने का सुझाव दूंगा। इसे सरल, और अद्यतन करने में आसान रखें।

Jsfiddle Example

.social-block a { 
 
    position: relative; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    margin: 10px; 
 
    color: #cc1e4a; 
 
    background-color: #fff; 
 
    border: 1px solid #cc1e4a; 
 
    border-radius: 50%; 
 
    box-sizing: border-box; 
 
    width: 50px; 
 
    height: 50px; 
 
    text-align: center; 
 
    transition: all .25s ease; 
 
    transition-property: color, box-shadow; 
 
} 
 
.social-block a:hover { 
 
    box-shadow: 0 0 0 3px #cc1e4a; 
 
    background-color: #cc1e4a; 
 
    color: #fff; 
 
} 
 
.social-block .fa { 
 
    font-size: 24px; 
 
    height: 100%; 
 
} 
 
/* center icon vertically */ 
 
.social-block .fa:after { 
 
    content: ""; 
 
    height: 100%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
/* box-shadow white line fixes */ 
 
.social-block a:hover:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: -3px; right: -3px; 
 
    top: -3px; bottom: -3px; 
 
    border-radius: 50%; 
 
    border: 6px solid #cc1e4a; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="social-block"> 
 
    <a href="#"><i class="fa fa-facebook"></i></a> 
 
    <a href="#"><i class="fa fa-twitter"></i></a> 
 
    <a href="#"><i class="fa fa-linkedin"></i></a> 
 
</div>

Answer 2

z-index:-1;.social-block .fa-stack-1x वर्ग में जोड़े।

.social-block .fa-stack-1x { 
    box-shadow: inset 0 0 0px 7px #fff; 
    z-index:-1; // Add this 
    position: absolute; 
    top: -1px; 
} 

जैसे: https://jsfiddle.net/hwpobc93/14/

-------

अपडेट किया गया:

:

चक्र मोटाई जो डिफ़ॉल्ट रूप से भयानक applys फ़ॉन्ट है यदि आप अधिक नियंत्रण रखना चाहते हैं तो आपको थोड़ा सीएसएस बदलना होगा:

• सीमा आइकन <i class="fa fa-circle-thin fa-stack-2x"></i>
• निकालें एक से पहले सीमा बनाने के लिए जोड़ें

न्यू उदाहरण:

https://jsfiddle.net/hwpobc93/18/