किसी मंडली में फ़ॉन्ट विस्मयकारी चिह्न बनाएं?

Question

मैं किसी प्रोजेक्ट पर फ़ॉन्ट भयानक का उपयोग कर रहा हूं, लेकिन मेरे पास कुछ चीजें हैं जो मैं फ़ॉन्ट भयानक आइकन के साथ करना चाहता हूं, मैं आसानी से एक आइकन कॉल कर सकता हूं जैसे:

<i class="fa fa-lock"></i>

क्या यह संभव है कि सभी आइकन हमेशा सीमा के साथ गोल घेरे में हों? कुछ इस तरह, मेरे पास एक तस्वीर है:

का उपयोग करते हुए

i {
  background-color: white;
  border-radius: 50%;
  border: 1x solid grey;
  padding: 10px;
}

प्रभाव करेंगे, लेकिन समस्या यह है कि आइकन हमेशा बड़े होते हैं जो पाठ या तत्व के पास होते हैं, कोई समाधान?

Answer 1

i.fa {
  display: inline-block;
  border-radius: 60px;
  box-shadow: 0px 0px 2px #888;
  padding: 0.5em 0.6em;

}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-wrench"></i>

---

पुराने उत्तर की JsField: http://fiddle.jshell.net/4LqeN/

Comments

कुछ मिल गया, लेकिन गोल घेरा नहीं?

— श्नाइडर

border-radiusतत्व दौर चाहिए। आप किस ब्राउजर का उपयोग करते हैं? उपसर्गों के साथ मेरे उत्तर को अद्यतन करेगा

— निको ओ

लेकिन यह कोई हल नहीं है। यह केवल तभी काम करता है जब iसामग्री हो। एफए के साथ आमतौर पर आपके पास आई-टैग के भीतर सामग्री नहीं होती है, लेकिन आइकन को सीएसएस द्वारा बाद में प्रदान किया जाता है: <i class="fa fa-lock"></i>और यह @Schneider ने वास्तव में पूछा है।

— Jan

@ जान मैं उस कल में जांच करूंगा। लेकिन मैं एक समस्या नहीं देख सकता। आप सही हैं, कि टैग में सामग्री नहीं है, लेकिन सामग्री सीएसएस के माध्यम से जोड़ी जाएगी। यहां तक ​​कि जब चिह्न लोड करने में विफल होगा, तो आपको एक चक्र दिखाई देगा। क्या आप एक समस्या के jsFiddle को उत्तर के साथ देख सकते हैं?

— निको ओ

नहीं। यह सवाल का जवाब है। प्रश्न के चित्र देखें। एक छाया है, एक कठिन घेरा नहीं है।

— निको हे

Answer 2

फ़ॉन्ट विस्मयकारी के साथ आप आसानी से इस तरह स्टैक्ड माउस का उपयोग कर सकते हैं:

<span class="fa-stack fa-2x">
  <i class="fas fa-circle-thin fa-stack-2x"></i>
  <i class="fas fa-lock fa-stack-1x fa-inverse"></i>
</span>

संदर्भित फ़ॉन्ट विस्मयकारी स्टैक्ड प्रतीक

अपडेट: - स्टैक्ड आइकन के लिए फिडल

Comments

स्टैक्ड आइकन केवल 2x तक काम करते हैं। यदि आप इससे बड़ा चाहते हैं, तो यह काम नहीं करता है

— J Lee

काश, यह स्वीकृत उत्तर होता, फॉन्टवॉच के साथ ऐसा करने का "सही" तरीका। स्वीकृत उत्तर एक हैक है जो अच्छी तरह से समायोजित नहीं होता है।

— Nov_

संख्या के साथ समान<span class="fa-stack fa-lg"> <i class="fa fa-circle-thin fa-stack-2x"></i> <i class="fa fa-stack-1x">1</i> </span>

— m3nda

@ इमराह - इसका एकमात्र विकल्प यहाँ है जो कि पूरी तरह से सरल है, कस्टम सीएसएस नहीं है, इसलिए इसका अधिक सटीक और फिर यहाँ कुछ भी है।

— 22:

बहुत ही सुंदर समाधान। @mmativ यदि आप सर्कल पर एक बैकग्राउंड कलर से मतलब रखते हैं तो आप बस <i class = "fa fa-

— Circle

Answer 3

आपको इसके लिए css या html ट्रिक्स की आवश्यकता नहीं है। फ़ॉन्ट विस्मयकारी रूप से इसके लिए वर्ग में बनाया गया है - fa- Circle कई आइकन को एक साथ स्टैक करने के लिए आप पैरेंट डिव पर fa-stack क्लास का उपयोग कर सकते हैं

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span> 

// और हमारे पास अब सर्कल के अंदर फेसबुक आइकन है :)

Comments

संपत बाधे ने अपने उत्तर में 2 साल पहले के समान ही बताया है। आपका लिखने से पहले आपने अन्य उत्तर क्यों नहीं पढ़े?

— तारास यारेमकिव

हे, संपत के लिए खेद है, मैंने उसे उत्तर नहीं दिया, मैं अपने उत्तर को संशोधित करने और अधिक समाधान या उपयोगी जानकारी जोड़ने का प्रयास करूंगा।

— Vasyl Gutnyk

यह एक अच्छा समाधान है, लेकिन यह प्रत्येक आइकन को एक नीली पृष्ठभूमि देता है। चारों ओर कोई काम?

— जमशेद कामरान

@ कोड यह साफ करने के लिए सीएसएस का उपयोग करें या नया बैकग्राउंड कलर जोड़ें। यह एक समस्या नहीं होनी चाहिए।

— वासील गुटनीक

Answer 4

का उपयोग कर एक सर्कल में फ़ॉन्ट आइकन emआधार माप के रूप में

यदि आप माप के लिए ईएमएस का उपयोग करते हैं line-height, font-sizeऔर border-radius, इसके साथ, text-align: centerयह चीजों को बहुत ठोस बनाता है:

#info i {
  font-size: 1.6em;
  width: 1.6em;
  text-align: center;
  line-height: 1.6em;
  background: #666;
  color: #fff;
  border-radius: 0.8em; /* or 50% width & line-height */
}

Answer 5

अद्यतन: बल्कि फ्लेक्स का उपयोग करें।

यदि आप सटीक चाहते हैं तो यह रास्ता है।

बेला। प्ले प्ले -> http://jsfiddle.net/atilkan/zxjcrhga/

यहाँ HTML है

<div class="sosial-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

यहाँ सीएसएस है

.sosial-links a{
    display: block;
    float: left;
    width: 36px;
    height: 36px;
    border: 2px solid #909090;
    border-radius: 20px;
    margin-right: 7px; /*space between*/

} 
.sosial-links a i{
    padding: 12px 11px;
    font-size: 20px;
    color: #909090;
}

मज़े करो

Comments

पाठ-संरेखण जोड़ना: केंद्र; बनाता है यह बहुत ज्यादा सब कुछ भी जानकारी के साथ काम करते हैं

— Marcio

ऊर्ध्वाधर संरेखण के बारे में कैसे?

— लोकलहोस्ट

Answer 6

आप यह भी कर सकते हैं। मैं अपने आइकॉमन आइकन के चारों ओर एक चक्र जोड़ना चाहता था। यहाँ कोड है।

span {
font-size: 54px;
border-radius: 50%;
border: 10px solid rgb(205, 209, 215);
padding: 30px;
}

Answer 7

अद्यतन :

हाल ही में फ्लेक्स सीखने पर, एक क्लीनर तरीका है (कोई टेबल और कम सीएसएस नहीं)। आवरण display: flex;को केंद्र के रूप में सेट करें और बच्चों के लिए इसे align-items: center;(ऊर्ध्वाधर) और justify-content: center;(क्षैतिज) केंद्र के लिए गुण दें ।

देखें यह अपडेटेड जेएस फिडल

---

अजीब है कि किसी ने भी पहले यह सुझाव नहीं दिया है .. मैं हमेशा ऐसा करने के लिए तालिकाओं का उपयोग करता हूं।
बस एक रैपर display: tableऔर text-align: centerक्षैतिज और vertical-align: middleऊर्ध्वाधर संरेखण के लिए इसके अंदर केंद्र सामान है ।

<div class='wrapper'>
  <i class='icon fa fa-bars'></i>
</div>

और इस तरह कुछ सास

.wrapper{
  display: table; 

  i{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

}

या यह जेएस फिडेल देखें

Comments

यह एक बहुत अच्छा और साफ और छोटा है!

— SCSS

@summsel मेरे मूल उत्तर के समान सटीक नहीं है ? आपने सिर्फ scss में कोड लिखा था और css नहीं।

— nclsvh

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

— summsel

Answer 8

यह दृष्टिकोण आप उपयोग करने की जरूरत नहीं है padding, बस सेट heightऔर widthके लिए aऔर जाने flexके साथ संभाल margin: 0 auto।

.social-links a{
  text-align:center;
	float: left;
	width: 36px;
	height: 36px;
	border: 2px solid #909090;
	border-radius: 100%;
	margin-right: 7px; /*space between*/
    display: flex;
    align-items: flex-start;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
} 
.social-links a i{
	font-size: 20px;
    align-self:center;
	color: #909090;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    margin: 0 auto;
}
.social-links a i::before{
  display:inline-block;
  text-decoration:none;
}
.social-links a:hover{
  background: rgba(0,0,0,0.2);
}
.social-links a:hover i{
  color:#fff;
}

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

<div class="social-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

Answer 9

नीचे दिए गए उदाहरण ने मेरे लिए बहुत काम नहीं किया, यह वह संस्करण है जो मैंने काम किया है!

HTML:

<div class="social-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

सीएसएस:

.social-links {
    text-align:center;
}

.social-links a{
    display: inline-block;
    width:50px;
    height: 50px;
    border: 2px solid #909090;
    border-radius: 50px;
    margin-right: 15px;

}
.social-links a i{
    padding: 18px 11px;
    font-size: 20px;
    color: #909090;
}

Answer 10

इसे इस्तेमाल करे

HTML:

<div class="icon-2x-circle"><i class="fa fa-check fa-2x"></i></div>

सीएसएस:

i {
    width: 30px;
    height: 30px;
}

.icon-2x-circle {
    text-align: center;
    padding: 3px;
    display: inline-block;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-box-shadow: 0px 0px 2px #888;
    -webkit-box-shadow: 0px 0px 2px #888;
    box-shadow: 0px 0px 2px #888;
}

Answer 11

फ़ॉन्ट विस्मयकारी चिह्न एक के रूप में डाला जाता है: पहले। इसलिए आप या तो मैं या मेरे जैसे स्टाइल कर सकते हैं :

.i {
   background: #fff;
   border-radius: 50%;
   display: inline-block;
   height: 20px;   
   width: 20px;
}

<a href="#"><i class="fa fa-facebook fa-lg"></i></a>

Answer 12

आप बस इस कोड का उपयोग करके गोल आइकन प्राप्त कर सकते हैं:

<a class="facebook-share-button social-icons" href="#" target="_blank">
    <i class="fab fa-facebook socialicons"></i>
</a>

अब आपका CSS होगा:

.social-icons {
display: inline-block;border-radius: 25px;box-shadow: 0px 0px 2px #888;
padding: 0.5em;
background: #0D47A1;
font-size: 20px;
}
.socialicons{color: white;}

Answer 13

मैं डेव एवरिट के जवाब को "लाइन-ऊँचाई" के साथ पसंद करता हूं, लेकिन यह केवल "ऊँचाई" को निर्दिष्ट करके काम करता है और फिर हम लाइन की ऊंचाई के लिए «महत्वपूर्ण» जोड़ना चाहते हैं ...

.cercle {
    font-size: 2em;
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em!important;
    background: #666;
    color: #fff;
    border-radius: 2em;
}

Comments

लाइन-ऊंचाई मेरे लिए इसे हल कर रही थी

— mecograph

जोड़ना !importantएक बैंड-सहायता है, न कि समाधान। इसका मतलब है कि आपके पास अपनी संपत्ति को ओवरराइड करने के लिए कहीं और सीएसएस संपत्ति है।

— टायलरएच

Answer 14

यह अब तक का सबसे अच्छा और सबसे सटीक समाधान है।

सीएसएस:

.social .fa {
      margin-right: 1rem;
      border: 2px #fff solid;
      border-radius: 50%;
      height: 20px;
      width: 20px;
      line-height: 20px;
      text-align: center;
      padding: 0.5rem;
    }