बड़ा ग्लिफ़िकॉन

Question

मैं ट्विटर बूटस्ट्रैप 3.0 (2.3.x नहीं) में बड़े ग्लिफ़िकॉन कैसे बनाऊं।

यह कोड मेरे ग्लिफ़िकन्स को बड़ा करेगा:

<button type="button" class="btn btn-default btn-lg">
   <span class="glyphicon glyphicon-th-list">
   </span>
</button>

केवल एक स्पैन का उपयोग करते हुए btn-lg वर्ग का उपयोग किए बिना मैं यह आकार कैसे प्राप्त कर सकता हूं ?

यह एक छोटा ग्लिफ़िकॉन देता है:

<span class="glyphicon glyphicon-link"></span>

Answer 1

आप बस अपनी पसंद के हिसाब से ग्लिफ़िकॉन को एक फॉन्ट-साइज़ दे सकते हैं:

span.glyphicon-link {
    font-size: 1.2em;
}

Comments

महान! मेरे मामले में, मेरे पास एक बटन के साथ एक इनपुट-समूह-बीटीएन था, और यह बटन थोड़ा बड़ा था। इसलिए मैंने अपने ग्लिफ़िकॉन के लिए बस "फ़ॉन्ट-आकार: 95%" दिया और इसे हल किया गया।

— १

Answer 2

यहां बताया गया है कि मैं इसे कैसे करता हूं:

<span style="font-size:1.5em;" class="glyphicon glyphicon-th-list"></span>

यह आपको मक्खी पर आकार बदलने की अनुमति देता है। सीएसएस को बदलने और सभी पर लागू होने के बजाय आकार बदलने के लिए तदर्थ आवश्यकताओं के लिए सबसे अच्छा काम करता है।

Comments

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

— कालोयान स्टामाटोव

कभी-कभी यह एक बंद होता है और आपको परेशान नहीं किया जा सकता है

— मैथ्यू लॉक

Answer 3

.btn-lgवर्ग बूटस्ट्रैप 3 (में निम्नलिखित सीएसएस है लिंक ):

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

यदि आप एक ही font-sizeऔर line-heightअपने स्पैन पर लागू करते हैं (या तो .glyphicon-linkएक नव निर्मित .glyphicons-lgयदि आप एक से अधिक उदाहरणों में इस आशय का उपयोग करने जा रहे हैं), तो आपको बड़े बटन के समान ग्लाइफिक मिलेगा।

Comments

btn-lgकक्षा को जोड़ना बहुत आसान विकल्प है। अच्छा उत्तर!

— नील

Answer 4

<button class="btn btn-default glyphicon glyphicon-plus fa-2x" type="button">
</button>

<!--fa-2x , fa-3x , fa-4x ... -->
<button class="btn btn-default glyphicon glyphicon-plus fa-3x" type="button">
</button>

Answer 5

मेरे मामले में, मैं एक था input-group-btnएक साथ button, और इस buttonअपने कंटेनर की तुलना में थोड़ा बड़ा था। इसलिए मैंने सिर्फ font-size:95%अपने ग्लिफ़िकॉन के लिए दिया और इसे हल किया गया।

<div class="input-group">
    <input type="text" class="form-control" id="pesquisarinbox" placeholder="Pesquisar na Caixa de Entrada">
    <div class="input-group-btn">
        <button class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-search" style="font-size:95%;"></span>
        </button>
    </div>  
</div>

Answer 6

अपने <span>में लिखें <h1>या <h2>:

<h1> <span class="glyphicon glyphicon-th-list"></span></h1>

Answer 7

यदि आप बूटस्ट्रैप 3 का उपयोग कर रहे हैं, तो टैग का उपयोग करें, जैसे यह <small><span class="glyphicon glyphicon-send"></span></small>बूटस्ट्रैप 3 के लिए एकदम सही काम करता है।
आप <small>आकार को और अधिक छोटा सेट करने के लिए कई टैग का उपयोग कर सकते हैं।
कोड:
<small><small><span class="glyphicon glyphicon-send"></span></small></small>

Comments

यह सवाल के बिल्कुल विपरीत है ... जब तक आप शैलियों को ओवरराइड नहीं करते हैं यह छोटा बना देगा। मैंने दूसरे दिन अपने सटीक उद्देश्य के लिए उस टैग का उपयोग किया।

— रिचर्ड बार्कर