मैं ग्लिफ़िकॉन बड़ा कैसे बनाऊं? (आकार बदलें?)

Question

मैं ग्लोब को ग्लिफ़िकॉन से बड़ा बनाना चाहूंगा ताकि यह पृष्ठ के एक बड़े हिस्से को कवर करे (यह एक वेक्टर इमेज है)। यह एक बटन या कुछ भी नहीं है; यह अकेला है। क्या इसे करने का कोई तरीका है?

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe"></span>
</div>  

Comments

बिग ग्लाइफ़िकॉन के

— केविन वर्कर 23

Answer 1

glyphiconसभी आइकन का आकार बढ़ाने के लिए फ़ॉन्ट-आकार बढ़ाएं ।

.glyphicon {
    font-size: 50px;
}

केवल एक आइकन को लक्षित करने के लिए,

.glyphicon.glyphicon-globe {
    font-size: 75px;
}

Comments

वह काम किया! (मैं इसे 5 मिनट में स्वीकार करूंगा (यह समय बचा है)) क्या इसे केंद्र करने का कोई तरीका है? @VenomVendor

— कोडरब्रायन

text-centerdiv पर।

— आइब्रीएन

ग्लिफ़िकॉन को "मांग पर" उपयोग करने के लिए बड़ा बनाने के लिए .glyphicon.larger {font-size: 150%; }

— user216661

इसे पतला बनाने के बारे में क्या?

— Nofel

!important;बूस्टर सीएसएस को ओवरराइड करने के लिए मुझे फ़ॉन्ट आकार में जोड़ना पड़ा ।

— इस बीच 14

Answer 2

फॉन्टव्यू के पास इसका एक सही समाधान है।

मैंने उसी को लागू किया। बस अपने मुख्य .css फ़ाइल पर इसे जोड़ें

.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}

अपने उदाहरण में आपको बस यही करना है।

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe gi-5x"></span>
</div>  

Comments

अच्छा! आप 1.5em जैसी भिन्नात्मक मात्रा का भी उपयोग कर सकते हैं।

— माइक टैवर्न

स्वीकृत उत्तर से बहुत बेहतर और एक आवर्ती समस्या का एक सामान्य समाधान दिखाता है।

— एडम

Answer 3

यदि आप बूटस्ट्रैप और फ़ॉन्ट-भयानक का उपयोग कर रहे हैं, तो यह आसान है, नए कोड की एक भी लाइन लिखने की आवश्यकता नहीं है, बस fa-Nx जोड़ें, जितना बड़ा आप चाहते हैं, डेमो देखें

<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-globe fa-lg"></span>
<span class="glyphicon glyphicon-globe fa-2x"></span>
<span class="glyphicon glyphicon-globe fa-3x"></span>
<span class="glyphicon glyphicon-globe fa-4x"></span>
<span class="glyphicon glyphicon-globe fa-5x"></span>

Comments

ग्लिफ़िकॉन और फ़ॉन्ट-विस्मयकारी बलों में शामिल हों!

— तिमो

मैं एफए और ग्लिफ़िकॉन के संयोजन के पक्ष में नहीं हूं। इनलाइन शैली का उपयोग करके या ऊपर एक सीएसएस वर्ग के माध्यम से ग्लिफ़िकॉन को अप करने के तरीके के बारे में नीचे दिए गए उत्तर देखें। या शुद्ध एफए समाधान के उपयोग के लिए ->

— फ़ेस

मार्कोज़ेन: वैसे भी बूटस्ट्रैप के अगले संस्करण से 4 ग्लिफ़िकॉन निकाले जाने वाले हैं, हम में से कई पहले एक साथ उपयोग कर रहे थे।

— अली अद्रवी

Answer 4

हां, और मूल रूप से आप इनलाइन शैली का उपयोग कर सकते हैं:

<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>

Answer 5

हेडिंग का उपयोग करने की कोशिश करें, अतिरिक्त सीएसएस की आवश्यकता नहीं है

<h1 class="glyphicon glyphicon-plus"></h1>

Comments

आप ऐसा कर सकते हैं, लेकिन यह आपको नियंत्रण का एक अच्छा स्तर नहीं देता है जिस तरह से सीएसएस का थोड़ा सा होगा।

— 20

फ़ॉन्ट-आकार पर उनके प्रभाव के कारण हेडर का उपयोग करना एक विरोधी पैटर्न है। कीबोर्ड द्वारा आपकी साइट को नेविगेट करने वाले उपयोगकर्ता को सीधे आपके आइकन पर भेजा जाएगा क्योंकि स्क्रीन रीडर मानता है कि यह पृष्ठ पर सबसे महत्वपूर्ण सामग्री के लिए शीर्षक / शीर्षक का प्रतीक है।

— रॉय

Answer 6

पूर्व के लिए .. वर्ग जोड़ें:

btn-lg - लार्गे

btn-sm - लघु

btn-xs - बहुत छोटा है

<button type=button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden=true></span>Star
</button>

 <button type=button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

रिफ़ लिंक बूटस्ट्रैप: ग्लिफ़िकन्स बूटस्ट्रैप

Comments

सवाल छवियों को माना जाता है, न कि छवियों को बटन के रूप में।

— user216661

Answer 7

मैंने इसके लिए बूटस्ट्रैप हेडर क्लासेस ("h1", "h2" आदि) का उपयोग किया है। इस तरह से आपको वास्तविक टैग का उपयोग किए बिना सभी शैली लाभ मिलते हैं। यहाँ एक उदाहरण है:

<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>