ग्लिफ़िकन्स के रंग को कुछ में नीले रंग में बदलें- लेकिन बूटस्ट्रैप 2 का उपयोग करके सभी स्थानों पर नहीं

Question

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

मैंने इन दो लिंक का उल्लेख किया है, लेकिन मुझे कुछ भी मददगार नहीं लग रहा है।

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

कृपया ध्यान दें: मैं बूटस्ट्रैप 2.3.2 का उपयोग कर रहा हूं ।

Answer 1

यह आइकन अपने colorमाता-पिता की सीएसएस संपत्ति के मूल्य से रंग को अपनाएगा ।

आप इसे सीधे शैली में जोड़ सकते हैं:

<span class="glyphicon glyphicon-user" style="color:blue"></span>

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

एचटीएमएल

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-user blue"></span>
<span class="glyphicon glyphicon-trash"></span>

सीएसएस

.blue {
    color: blue;
}

इस बेला का एक उदाहरण है।

Comments

धन्यवाद। मैं बूटस्ट्रैप / 2.3.2/ का उपयोग कर रहा हूं। यह मेरे लिए काम नहीं कर रहा है।

— माइक फिल्स

फिर भी आप इसका उपयोग कर सकते हैं, ग्लिफ़िकॉन के लिए सभी सीएसएस नियम हटा सकते हैं और इस सीएसएस फ़ाइल netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/… को जोड़ सकते हैं और बूटस्ट्रैप 3 के लिए ग्लिफ़िकॉन फोंट डाउनलोड कर सकते हैं, यह कसरत करेगा।

— विकास घोडके

@VikasGhodke, कि अभी भी संस्करण 3. के लिए पूरी परियोजना के प्रवास की आवश्यकता होगी

— मैक्सिम वी।

Answer 2

बस text-successग्लिफ़िकॉन पर ट्विटर बूटस्ट्रैप क्लास लागू करें :

<span class="glyphicon glyphicon-play text-success">начал работу</span>

उपलब्ध रंगों की पूरी सूची: बूटस्ट्रैप प्रलेखन: हेल्पर कक्षाएं
(नीला भी मौजूद है)

Comments

सेब के साथ संतरे क्यों मिलाएं? : \

— USer22999299

* начал работуहै started a work। मैं मक्खी पर उत्तर लिखूंगा और मैंने नहीं सोचा था कि यह उच्च मतदान होगा। इस प्रकार स्क्रीनशॉट को मेरे पिछले ऐप से रूसी में बनाया गया था ताकि पता चल सके कि मार्कअप कैसे दिखता है।

— इटेनिकॉल

मुझे यह बहुत उचित लगता है अगर आइकन को अतिश्योक्तिपूर्ण रूप से दिखाया जाना चाहिए क्योंकि ऑपरेशन में सफलता मिली है।

— 13

यह बेहतर है क्योंकि लागू रंग वर्तमान बूटस्ट्रैप थीम रंग योजना के अनुरूप होगा

— रेमुस रुसानु

@ एक्सएक्सए कोशिश text-danger। यहां रंगों की पूरी सूची दी गई है।

— naXa

Answer 3

अंत में मुझे खुद जवाब मिला। 2.3.2 बूटस्ट्रैप में नए आइकन जोड़ने के लिए हमें आपको फ़ाइल में Font Awsome css जोड़ना होगा । ऐसा करने के बाद हम रंग और आकार बदलने के लिए शैलियों को सीएसएस के साथ ओवरराइड कर सकते हैं।

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

सीएसएस

.brown{color:#9b846b}

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

एचटीएमएल

<p><i class="icon-camera-retro icon-large brown"></i> icon-camera-retro</p> <!--brown class added-->
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>

Comments

नए संस्करण (4.0.3 इस टिप्पणी के समय) bootstrapcdn.com/#fontawesome_tab

— wizulus

Answer 4

आप यह भी कर सकते हैं, आशा है कि मदद करता है

<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>

Answer 5

बूटस्ट्रैप 3.0 के लिए, इसने मेरे लिए काम किया:

.myclass .glyphicon {color:blue !important;}

Answer 6

हां, आप आइकन को सफेद रंग में सेट कर सकते हैं। यहाँ है कि यह मेरे लिए कैसे काम करता है।

Bootstrap <3

एचटीएमएल

<i class="icon-ok icon-white"></i>

इससे आपका आइकन सफेद दिखाई देगा।

Comments

icon-whiteबूटस्ट्रैप 2. साथ मेरे लिए काम किया सवाल नीला के लिए कहा है, लेकिन वहाँ सफेद के लिए एक एकल वर्ग है जानते हुए भी काम लगता है।

— smholloway

Answer 7

मैंने बूटस्ट्रैप 2.3.2 के लिए एक वैकल्पिक रंग पुस्तकालय बनाया है। यह उपलब्ध है और पुराने ग्लाइफोर्सन लाइब्रेरी के लिए अधिक रंगों में रुचि रखने वाले किसी भी व्यक्ति के लिए उपयोग करने के लिए सरल है।

Answer 8

यदि यह केवल एक बूटस्ट्रैप आइकन है। ध्यान दें कि आइकन पाठ या टाइपोग्राफी के अंतर्गत हैं। बस इस तरह से टेक्स्ट कलर क्लास जोड़ें। जैसे पाठ-प्राथमिक, पाठ-जानकारी और इतने पर आइकन वर्ग के आगे:

<i class="icon features-icon icons8-collaboration-2 text-primary"></i>
<i class="icon features-icon icons8-collaboration-2 text-secondary"></i>

Answer 9

बूटस्ट्रैप> = v4.0 ग्लिफ़िकॉन समर्थन को गिरा दिया

ग्लिफ़िकॉन्स आइकन फ़ॉन्ट को गिरा दिया। यदि आपको आइकन की आवश्यकता है, तो कुछ विकल्प हैं:

ग्लिफ़िकॉन के अपस्ट्रीम संस्करण

Octicons

बहुत बढ़िया

स्रोत: https://v4-alpha.getbootstrap.com/migration/#compenders

यदि आप बूटस्ट्रैप> = v4.0 या नए का उपयोग कर रहे हैं, तो आप बूटस्ट्रैप की मौजूदा शैली कक्षाएं जैसे कि text-success, text-warningआदि का उपयोग कर सकते हैं ।

उदाहरण के लिए, यदि आप fontawesome का उपयोग कर रहे हैं:

<i class="fa fa-tag text-danger" aria-hidden="true"></i>

Answer 10

सीएसएस:

.blue-icon{
color:blue !important;
}

एचटीएमएल

<i class="fa fa-wrench blue-icon"></i>

ग्लिफ़िकॉन 4.0 में हटा दिया जाता है, मैं फ़ॉन्ट-भयानक 4 या नए की सलाह देता हूं :)

Answer 11

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

   <p style="color:green">Time icon: <span class="glyphicon glyphicon-time" ></span></p>  

Answer 12

रंग काम नहीं करता है, यदि आप बूटस्ट्रैप फ़ॉन्ट png छवि के लिए उपयोग करते हैं, जैसा कि मैं।

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../img/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}

एचटीएमएल 5 छवि, उदाहरण के लिए सीएसएस फिल्टर का उपयोग करें

filter: invert(100%)  contrast(2) brightness(50%) sepia(40%) saturate(450%) hue-rotate(-50deg);