क्या मैं केवल CSS का उपयोग करके बूटस्ट्रैप आइकन में रंग जोड़ सकता हूं?

Question

ट्विटर के बूटस्ट्रैप में ग्लिफ़िकॉन द्वारा प्रतीक का उपयोग किया गया है । वे available in dark gray and whiteडिफ़ॉल्ट रूप से " " हैं :

क्या आइकनों के रंग बदलने के लिए कुछ सीएसएस ट्रिकरी का उपयोग करना संभव है? मैं कुछ अन्य css3 प्रतिभा के लिए उम्मीद कर रहा था जो प्रत्येक रंग के लिए एक आइकन छवि सेट होने से रोकेंगी।

मुझे पता है कि आप एनक्लोजिंग ( <i>) तत्व की पृष्ठभूमि का रंग बदल सकते हैं , लेकिन मैं आइकन अग्रभूमि रंग के बारे में बात कर रहा हूं। मुझे लगता है कि आइकन छवि पर पारदर्शिता को उलटा करना संभव होगा और फिर पृष्ठभूमि का रंग निर्धारित किया जाएगा।

तो, क्या मैं केवल CSS का उपयोग करके बूटस्ट्रैप आइकन में रंग जोड़ सकता हूं?

Comments

मुझे ऐसा नहीं लगता ... लेकिन आप शायद जावास्क्रिप्ट और एक कैनवास तत्व के साथ ऐसा कर सकते हैं।

— bfavaretto

@bfavaretto - क्या आप विस्तृत कर सकते हैं? क्या आप कोड के साथ आने का मतलब है / निर्देशांक में से प्रत्येक को आकर्षित करने के लिए या मौजूदा png छवि का उपयोग करके किसी भी तरह?

— cwd

क्षमा करें, आपको कोड सुझाने के लिए कैनवास तत्व के साथ पर्याप्त अनुभव नहीं है, लेकिन मुझे पता है कि आप कैनवस के साथ व्यक्तिगत रूप से पिक्सेल में हेरफेर कर सकते हैं।

— bfavaretto

Answer 1

हाँ, यदि आप बूटस्ट्रैप के साथ फ़ॉन्ट विस्मयकारी का उपयोग करते हैं ! आइकन थोड़े अलग हैं, लेकिन उनमें से अधिक हैं, वे किसी भी आकार में बहुत अच्छे लगते हैं, और आप उनमें से रंग बदल सकते हैं।

मूल रूप से आइकन फोंट हैं और आप उनमें से बस सीएसएस रंग संपत्ति के साथ रंग बदल सकते हैं। एकीकरण निर्देश दिए गए लिंक में पृष्ठ के नीचे हैं।

---

संपादित करें: बूटस्ट्रैप 3.0.0 आइकन अब फोंट हैं!

जैसा कि कुछ अन्य लोगों ने बूटस्ट्रैप 3.0.0 की रिलीज के साथ उल्लेख किया है, डिफ़ॉल्ट आइकन ग्लिफ़ अब फ़ॉन्ट विस्मयकारी जैसे फोंट हैं, और colorसीएसएस संपत्ति को बदलकर रंग बस बदला जा सकता है। आकार बदलना font-sizeसंपत्ति के माध्यम से किया जा सकता है ।

Comments

आह, चतुर! यह सेट करने के लिए मत भूलना cursor: default;ताकि उपयोगकर्ता I-Bar न देखें। इसके अलावा, एफएफ चार्टवेल की

— दाई

जब आप माउस-ओवर टेक्स्ट (जैसे वर्ड प्रोसेसर में) करते हैं, तो आपका कर्सर एक ओवरसाइज़्ड कैपिटल " I" वर्ण की तरह दिखता है , इसका उपयोग टेक्स्ट के चयन के लिए किया जाता है। CSS में यह कहा जाता है cursor: text;। इसे "आई-बीम" के रूप में भी जाना जाता है।

— दाई

Answer 2

बूटस्ट्रैप आरसी 3 की नवीनतम रिलीज के साथ, आइकन का रंग बदलना उतना ही सरल है जितना कि आप चाहते हैं कि रंग के साथ एक वर्ग जोड़ना और इसे स्पैन में जोड़ना है।

डिफ़ॉल्ट काला रंग:

<h1>Password Changed <span class="glyphicon glyphicon-ok"></span></h1>

बन जाएगा

<h1>Password Changed <span class="glyphicon glyphicon-ok icon-success"></span></h1>

सीएसएस

.icon-success {
    color: #5CB85C;
}

बूटस्ट्रैप 3 ग्लिफ़िकॉन्स सूची

Answer 3

क्योंकि ग्लिफ़िकॉन अब फोंट हैं, कोई भी संदर्भात्मक कक्षाओं का उपयोग करके आइकन पर उचित रंग लागू कर सकता है।

उदाहरण के लिए: सीएसएस में <span class="glyphicon glyphicon-info-sign text-info"></span> जोड़ने text-infoसे आइकन को नीले रंग की जानकारी मिल जाएगी।

Comments

धन्यवाद संदर्भ वर्गों को लागू करने के लिए एक रास्ता खोज रहा था। पाठ में से कोई भी - * प्रासंगिक कक्षाएं काम करेंगी

— डस्टिन होजेस

Answer 4

एक अलग रंग में बूटस्ट्रैप आइकन के लिए एक और संभव तरीका है वांछित रंग में एक नया .png बनाना, (जैसे। मैजेंटा) और इसे / path-to-bootstrap-css / img / glyphicons-halflings- magenta .png के रूप में सहेजना है ।

अपने चरों में। बिना खोजे

// Sprite icons path
// -------------------------
@iconSpritePath:          "../img/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";

और इस लाइन को जोड़ें

@iconMagentaSpritePath:     "../img/glyphicons-halflings-magenta.png";

अपने sprites.less में जोड़ें

/* Magenta icons with optional class, or on hover/active states of certain elements */
.icon-magenta,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
  background-image: url("@{iconMagentaSpritePath}");
}

और इसे इस तरह से उपयोग करें:

<i class='icon-chevron-down icon-magenta'></i>

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

Comments

बस फिर से दोहराना चाहता थाI was hoping for some other css3 brilliance that would prevent having to have an icon image set for each color

— cwd

विशुद्ध रूप से CSS के माध्यम से नहीं किया जा सकता है जो पार ब्राउज़र संगत भी है। आमतौर पर लोगों को संबंधित आइकनों के साथ एक रंग योजना की आवश्यकता होती है - इसलिए मैं कहूंगा कि 5 रंग सेट एक चुनौती का ज्यादा हिस्सा नहीं है।

— नवंबर को foxybagga

@seppludger आप एक नया रंग आधा स्प्राइट कैसे बना सकते हैं? क्या आप ऐसा करने में सफल हुए हैं? यदि मैं उन्हें किसी भी ग्राफिक्स संपादक में लोड करता हूं तो मैं रंग नहीं बदल सकता।

— नॉर्मन

Answer 5

त्वरित और गंदे काम जिसके लिए यह मेरे लिए किया गया था, वास्तव में आइकन को रंग नहीं दे रहा था, लेकिन आप चाहते हैं कि रंग में एक लेबल या बैज के साथ इसे आसपास;

<span class="label-important label"><i class="icon-remove icon-white"></i></span>
<span class="label-success label"><i class="icon-ok icon-white"></i></span>

Comments

आपका उत्तर उपयोगी था, + 1. मैं संपादन आइकन का उपयोग करना चाहता था और पीला रंग डालना चाहता था। क्या आप कृपया मुझे बता सकते हैं कि कैसे करना है?

वैसे आप आइकन-ओके को कुछ और बदल सकते हैं; जैसे <span class = "लेबल-चेतावनी लेबल"> <i class = "icon- <iconname> icon-white"> </ i> </ span>। उदाहरण के लिए: <span class = "label-चेतावनी लेबल"> <i class = "icon-edit आइकन-white"> </ i> </ span>। नए बूटस्ट्रैप imo के लिए जाना बेहतर है ..

— frbl

Answer 6

बूटस्ट्रैप ग्लिफ़िकॉन फोंट हैं। इसका मतलब यह सीएसएस स्टाइल के माध्यम से किसी भी अन्य पाठ की तरह बदला जा सकता है।

सीएसएस:

<style>
   .glyphicon-plus {
       color: #F00; 
   }
</style>

HTML:

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

उदाहरण:

<!doctype html>
<html>
<head>
<title>Glyphicon Colors</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
   .glyphicon-plus {
        color: #F00;    
   }
</style>
</head>

<body>
    <span class="glyphicon glyphicon-plus"></span>
</body>
</html>

जेन क्रेमर द्वारा बूटस्ट्रैप 3 के साथ कोर्स अप और रनिंग देखें , या कस्टम शैलियों के साथ ओवरराइडिंग कोर सीएसएस पर अलग-अलग पाठ देखें ।

Answer 7

यह सब थोड़ा सा चक्कर है ।।

मैंने इस तरह से ग्लिफ़ का इस्तेमाल किया है

  </div>
        <div class="span2">
            <span class="glyphicons thumbs_up"><i class="green"></i></span>
        </div>
        <div class="span2">
            <span class="glyphicons thumbs_down"><i class="red"></i></span>
        </div>

और रंग को प्रभावित करने के लिए, मैंने सिर पर इस तरह से थोड़ा सा सीएसएस शामिल किया

<style>
        i.green:before {
            color: green;
        }
        i.red:before {
            color: red;
        }
    </style>

वोइला, हरा और लाल अंगूठा।

Answer 8

स्टाइल टैग के साथ भी काम करता है:

<span class="glyphicon glyphicon-ok" style="color:#00FF00;"></span>

<span class="glyphicon glyphicon-remove" style="color:#FF0000;"></span>

Answer 9

यह वास्तव में बहुत आसान है:

महज प्रयोग करें:

.icon-name{
color: #0C0;}

उदाहरण के लिए:

.icon-compass{
color: #C30;}

बस।

Answer 10

mask-imageसंपत्ति का उपयोग करें , लेकिन यह थोड़ा हैक है। यह यहां सफारी ब्लॉग में प्रदर्शित किया गया है ।

इसका वर्णन यहाँ गहराई से किया गया है ।

मूल रूप से आप कहते हैं कि एक सीएसएस बॉक्स बनाया जाएगा, background-image: gradient(foo);और फिर उन पीएनजी चित्रों के आधार पर एक छवि मुखौटा लागू करें।

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

Comments

mask-imageसंपत्ति के लिए ध्यान रखें कि महान नहीं है ।

— स्कॉट बर्टेल

Answer 11

स्वीकृत उत्तर (फ़ॉन्ट भयानक का उपयोग करके) सही है। लेकिन चूंकि मैं सत्यापन त्रुटियों पर दिखाने के लिए लाल संस्करण चाहता था, इसलिए मैंने इस साइट पर प्रस्तावित एक ऐडऑन पैकेज का उपयोग करके समाप्त कर दिया ।

बस सीएसएस फ़ाइलों में url पथ संपादित किए जाते हैं क्योंकि वे निरपेक्ष होते हैं (/ के साथ शुरू होते हैं) और मैं सापेक्ष होना पसंद करता हूं। ऐशे ही:

.icon-red {background-image: url("../img/glyphicons-halflings-red.png") !important;}
.icon-purple {background-image: url("../img/glyphicons-halflings-purple.png") !important;}
.icon-blue {background-image: url("../img/glyphicons-halflings-blue.png") !important;}
.icon-lightblue {background-image: url("../img/glyphicons-halflings-lightblue.png") !important;}
.icon-green {background-image: url("../img/glyphicons-halflings-green.png") !important;}
.icon-yellow {background-image: url("../img/glyphicons-halflings-yellow.png") !important;}
.icon-orange {background-image: url("../img/glyphicons-halflings-orange.png") !important;}

Comments

अंत में, बूटस्ट्रैप के पुराने संस्करणों के साथ संगत

— दिमित्री गिंजबर्ग

Answer 12

आप विश्व स्तर पर भी रंग बदल सकते हैं

अर्थात

 .glyphicon {
       color: #008cba; 
   }

Answer 13

बस GLYPHICONS का उपयोग करें और आप रंग बदलने के लिए बस सीएसएस सेटिंग में सक्षम हो जाएगा:

#myglyphcustom {
    color:#F00;
}

Answer 14

मैंने सोचा कि मैं इस स्निपेट को इस पुरानी पोस्ट में शामिल कर सकता हूं। आइकनों के फॉन्ट होने से पहले मैंने यही किया है:

<i class="social-icon linkedin small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>
<i class="social-icon facebook small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>

यह @frbl के डरपोक उत्तर के समान है, फिर भी यह दूसरी छवि का उपयोग नहीं करता है। इसके बजाय, यह <i>तत्व के पृष्ठभूमि-रंग को सेट whiteकरता है और border-radiusपूरे <i>तत्व को "गोल" बनाने के लिए CSS संपत्ति का उपयोग करता है । यदि आपने देखा, border-radius(7.5px) का मान widthऔर heightसंपत्ति का आधा है (दोनों 15px, आइकन वर्ग बनाते हुए), <i>तत्व को परिपत्र बनाते हैं ।