क्या मैं फ़ॉन्ट विस्मयकारी के आइकन का रंग बदल सकता हूं?

Question

मुझे <a>किसी कारण से अपने आइकन को एक टैग में लपेटना होगा ।
क्या फ़ॉन्ट-भयानक आइकन के रंग को काले रंग में बदलने का कोई संभव तरीका है?
या यह असंभव है जब तक यह एक <a>टैग के भीतर लिपटे हुए है ? फ़ॉन्ट भयानक माना जाता है कि फ़ॉन्ट छवि नहीं है, है ना?

<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>

Comments

आइकॉन का रंग, आकार, और छाया की शैली

— जेम्स डनली

इसे देखें: Fortawesome.github.io/Font-Awesome/examples

— मोहम्मद ज़मीर

Answer 1

यह मेरे लिए काम किया:

.icon-cog {
  color: black;
}

4.7.0 से ऊपर के फ़ॉन्ट के संस्करणों के लिए , ऐसा लगता है:

.fa-cog {
  color: black;
}

Comments

@ इवांस धन्यवाद, लेकिन समस्या यह है कि मैंने कुछ समय पहले <i class = "icon-cog icon-white"> को टेबल सेल पर रखा है जो काले रंग का है। आपके सीएसएस ने इसे काले रंग में बदलने के लिए भी मजबूर किया :(

— HUSTEN

आप निम्नलिखित जोड़ सकते हैं: .icon-cog.icon-white {color: white; }

— इवान हैन

बस इस के पार आया - मैंने पाया कि सभी आइकनों में 'एफए' की एक कक्षा को जोड़ा और फिर .fa {color: green;}ट्रिक डाल दी। फिर .fa.icon-white {color: white;}आप जैसा चाहें ऊपर वैसा ही प्रभाव पाने के लिए कर सकते हैं।

— क्लार्कबाय

क्या यह बदलना संभव हैbackground-color

— vamsikrishnamannem

@vamsikrishnamannem युप। आप background-color: #112233CSS में जोड़ सकते हैं । की जाँच करें इस कोड को एक उदाहरण के लिए।

— इवान हैन

Answer 2

HTML:

    <i class="icon-cog blackiconcolor">

सीएसएस:

    .blackiconcolor {color:black;}

आप बटन आइकन पर अतिरिक्त वर्ग भी जोड़ सकते हैं ...

Comments

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

— डेविडहायो

Answer 3

आप शैली विशेषता में रंग निर्दिष्ट कर सकते हैं:

<a href="/users/edit"><i class="icon-cog" style="color:black"></i> Edit profile</a>

Comments

-1 सबसे पहले, यह गलत है, क्योंकि यह पाठ का रंग बदल देगा, न कि केवल आइकन का रंग, जैसा कि अनुरोध किया गया है। दूसरी बात, इनलाइन css का उपयोग करके प्रचार नहीं किया जाना चाहिए।

— एड्रियन श्मिट

प्रश्न कहां कहता है "सिर्फ आइकन का रंग" और पाठ का रंग नहीं?

— dandrews

मुझे लगता है कि सवाल स्पष्ट रूप से जिस तरह से निहित है, बल्कि स्पष्ट रूप से निहित है। और ऐसा लगता है कि आप सहमत होंगे, जब से आपने अपना उत्तर अपडेट किया :)

— एड्रियन श्मिट

मैं एक छोटा सा संकेत देना चाहता हूं Bootstrap। वर्ग <i> का उपयोग करने के साथ टैग करें text-primary, नीले रंग के आइकन के रंग को ओवरराइड करें। तो इसके बारे में पता होना अच्छा है।

— इलिया

Answer 4

अपने संपूर्ण प्रोजेक्ट के लिए फ़ॉन्ट भयानक आइकन रंग बदलने के लिए इसे अपने सीएसएस में उपयोग करें

.fa {
  color : red;
}

Comments

यह अच्छा है लेकिन मेरी परियोजना के सभी आइकन बदल देता है। मैंने .fa-black {color: # 000;} जैसी कक्षाएं बनाईं। फिर मैंने उन पिक्चर्स में फ़ेस-ब्लैक क्लासेस जोड़े जहाँ मुझे एक अलग रंग चाहिए था।

— डेविडहोगो

Answer 5

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

<i class="icon-cog text-red">
<i class="icon-cog text-blue">
<i class="icon-cog text-yellow">

Comments

और कहाँ text-red, text-blueया से text-yellowआता है?

— बृहस्पतिवार

यह बूटस्ट्रैप कक्षाओं से आता है

— राहुल ताथोड़

Answer 6

यदि आप CSS फ़ाइल को बदलना नहीं चाहते हैं, तो यह मेरे लिए काम करता है। HTML में, रंग के साथ शैली जोड़ें:

<i class="fa fa-cog" style="color:#fff;"></i>

Answer 7

उस तरह के बटन में केवल कॉग-आइकनों को हिट करने के लिए, आप बटन को एक क्लास दे सकते हैं, और बटन के अंदर होने पर ही आइकन के लिए रंग सेट कर सकते हैं।

HTML:

<a class="my-nice-button" href="/users/edit">
    <i class="icon-cog"></i>
    Edit profile
</a>

सीएसएस:

.my-nice-button>i { color: black; }

यह किसी भी आइकन को बनाएगा जो आपके बटन का सीधा वंशज है।

Answer 8

@ClarkeyBoy उत्तर के संदर्भ में, नीचे दिए गए कोड ठीक काम करते हैं, यदि Font-Awesomeआइकनों के नवीनतम संस्करण का उपयोग कर रहे faहैं या यदि आप कक्षाओं का उपयोग कर रहे हैं

.fa.icon-white {
    color: white;
}

और, फिर icon-whiteमौजूदा वर्ग में जोड़ें

Answer 9

.fa-search{
    color:#fff;
 }

आप उस कोड को css में लिखते हैं और यह रंग को सफेद या आपके इच्छित किसी भी रंग में बदल देगा, आप इसे निर्दिष्ट करते हैं

Answer 10

बस जो आप चाहते हैं उसे टेक्स्ट स्टाइल दें: डी एचटीएमएल:

<a href="javascript:;" class="fa fa-trash" style="color:#d9534f;">
   <span style="color:black;">Text Name</span>
</a>

Answer 11

बस इसे शैली दें जो आप चाहते हैं

style="color: white;font-size: 20px;"

Answer 12

आप संपत्ति का उपयोग करके अपने अग्रभूमि रंग को बदलकर एक फ़ॉन्ट आइकन का रंग बदल सकते css colorहैं । निम्नलिखित उदाहरण हैं:

<i class="fa fa-cog" style="color:white">

---

यह svgs को भी सपोर्ट करता है

<style>
.fa-cog{
color:white;
}
</style>

---

<style>
.parent svg, .parent i{
color:white
}
</style>

<div class="parent">
  <i class="fa fa-cog" style="color:white">
</div>

---

Answer 13

इस कोड को एक ही पंक्ति में लिखें, इससे आइकन का रंग बदल जाता है:

<li class="fa fa-id-card-o" style="color:white" aria-hidden="true">

Answer 14

यदि आप किसी विशिष्ट आइकन का रंग बदलना चाहते हैं, तो आप कुछ इस तरह का उपयोग कर सकते हैं:

.fa-stop {
    color:red;
}

Answer 15

आप बूटस्ट्रैप क्लास के साथ फ़ॉन्ट विस्मयकारी आइकन का रंग बदल सकते हैं

उपयोग

text-color

उदाहरण

text-white

Answer 16

मेरे लिए केवल एक चीज जो काम की है वह है इनलाइन css + ओवरराइडिंग

<i class="fas fa-ellipsis-v fa-2x" style="color:red !important"></i>

Answer 17

HTML:

<i class="icon-cog blackiconcolor">

सीएसएस:

 .blackiconcolor {color:black;}

कक्षा का उपयोग करने से आपको एक मुफ्त बाध्यकारी संपत्ति मिलेगी जिसे आप किसी भी टैग पर आवेदन कर सकते हैं जिसकी आपको आवश्यकता है।

Comments

-1 फ़ॉन्ट विस्मयकारी चिह्न पाठ हैं, इसलिए नाम। उन्हें किसी अन्य पाठ की तरह सीएसएस का उपयोग करके रंगीन किया जाना चाहिए, न कि विक्रेता-विशिष्ट चाल का उपयोग करके। इसके अलावा, चूंकि वे पाठ हैं, वे पहले से ही काले-और-सफेद (या मोनो-रंग) हैं।

— एड्रियन श्मिट

@ AdrianSchmidt उपरोक्त उत्तर काला करने के लिए एक छवि को परिवर्तित करने के लिए है, मुझे इस से फ़ॉन्ट रंग बदलने का मतलब नहीं था, मुझे आशा है कि आप मुझे मिल रहे हैं ..

— ameya rote

मै समझता हुँ। प्रश्न के संबंध में उत्तर अभी भी गलत है। फ़ॉन्ट विस्मयकारी चिह्न चित्र नहीं हैं, वे पाठ हैं।

— एड्रियन श्मिट