फ़ॉन्ट विस्मयकारी प्रतीक के आइकन रंग, आकार और छाया को कैसे स्टाइल करें

Question

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

उदाहरण के लिए, Font Awesome की साइट कुछ आइकन सफेद और कुछ लाल रंग में दिखाएगी, लेकिन CSSउन्हें इस तरह से स्टाइल करने का तरीका नहीं दिखाएगी ...

Answer 1

यह देखते हुए कि वे केवल फोंट हैं, फिर आपको उन्हें फोंट के रूप में स्टाइल करने में सक्षम होना चाहिए:

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}

Comments

@ डेविड थॉमस: यह एक अच्छा समाधान है। इसे पोस्ट करने के लिए आपका धन्यवाद। हालांकि, मैं अभी भी चकित हूं कि फ़ॉन्ट-भयानक कभी-कभी सफेद और कभी-कभी काले रंग में आइकन दिखाता है। TRICK क्या है? जैसा कि GirlCanCode2 ने बताया, FA वेब साइट पर उदाहरण दोनों काले और सफेद आइकन और पाठ दिखाते हैं। । । फायरबग में तत्वों की जांच करना, हालांकि, विशिष्ट आइकन (जैसे, आइकन-जानकारी) के लिए सीएसएस को सफेद होने के लिए लिखा गया है। क्या वास्तव में हमें ऐसा करना है? Bootstrap.css में कोई आइकन-सफ़ेद विकल्प नहीं है?

— ऐस

रंग बदलने के लिए, एसओ में यह जाँच करें , आशा है कि किसी की मदद करता है

— 10

@ यदि मुझे पता है कि यह पुराना है और आपने अब तक यह जान लिया होगा, लेकिन अन्य लोगों के लिए भी यह सवाल है कि आप यहां और यहां भी विशिष्टता में देखना चाहते हैं । जानने के लिए दूसरी चीज सीएसएस कैस्केड है; उदाहरण के लिए शैलियों और स्टाइलशीट जो दूसरों के बाद आती हैं, जब तक कि उनकी शैली के नियम चयनकर्ता कम विशिष्ट नहीं होते (जैसे विशिष्टता में)। इसलिए, मेरा पसंदीदा अभ्यास ओवरऑल मैच कम से कम और ओवरराइड के बाद स्टाइल डालना है।

— जॉन

Answer 2

आप सिर्फ स्टाइल इनलाइन भी जोड़ सकते हैं:

<i class="icon-ok-sign" style="color:green"></i>

<i class="icon-warning-sign" style="color:red"></i>

Comments

वोटों को कम करने के बावजूद, यह जवाब ठीक काम करता है। क्योंकि फ़ॉन्ट भयानक एक ऐसा फ़ॉन्ट है जो पाठ को प्रभावित करने वाली शैलियों और कक्षाओं के लिए प्रतिक्रिया करता है।

— एरोनल्स

@NightOwl इन संसाधनों का उपयोग करना, बंडलिंग और कैश करना भी सबसे अच्छा अभ्यास है। यहां कोई भी उत्तर उन चीजों में से किसी को प्रदर्शित नहीं करता है, और अलग-अलग उत्तर के संदर्भ में सर्वोत्तम प्रथाओं का पालन करने और लागू करने के लिए अभिजात आईएमओ है। जो कोई भी सीएसएस को समझता है, उसे उस शैली को लेने और सीएसएस वर्ग में ले जाने में सक्षम होना चाहिए।

— एरोनल्स

@NightOwl यहां तक ​​कि उच्चतम मतदान का जवाब सर्वोत्तम प्रथाओं के मामले में बहुत भयानक है। आपको साझा सीएसएस फ़ाइलों में शैलियों का निर्माण नहीं करना चाहिए जो #id द्वारा तत्वों को संदर्भित करते हैं, क्योंकि प्रत्येक पृष्ठ पर केवल एक तत्व उस शैली की सदस्यता ले पाएगा। यदि मैंने इसे इस कारण से अस्वीकार कर दिया, तो क्या मैं सुंदर अभिजात्य नहीं होगा? दोनों उत्तरदाताओं ने प्रश्नकर्ता को उपयोगी जानकारी प्रदान करने के लिए एक प्रभावी प्रयास किया, और मुझे नहीं लगता कि जब उनका उत्तर वास्तव में प्रभावी होता है, तो उन्हें अस्वीकृत कर दिया जाना चाहिए।

— एरोनल्स

कोई करना चाहता है suppliment एक टिप्पणी है कि इंगित करता है यह इनलाइन शैलियों का प्रयोग नहीं करने के लिए आम तौर पर सबसे अच्छा अभ्यास है के साथ जवाब है, तो उस उपयुक्त होगा। एक प्रभावी और जानकारीपूर्ण उत्तर को ऐसी तुच्छताओं पर नहीं उतारा जाना चाहिए, जब कोई टिप्पणी जोड़कर उत्तर के मौजूदा मूल्य में सुधार कर सकता है।

— एरोनल्स

मेरे लिए इसका कोई मतलब नहीं है कि एक साधारण रंग सीएसएस निर्देश को अपनी कक्षा में रखें और अपनी सीएसएस संपत्ति के साथ बंडल करें। आप क्या करेंगे? class='icon-ok-sign my-red-class'? या class='icon-ok-sign-red'? यह इसे कम पठनीय बनाता है और जटिलता के एक बेकार स्तर को जोड़ता है।

— नुरेटिन

Answer 3

यदि आप एक ही समय में बूटस्ट्रैप का उपयोग कर रहे हैं, तो आप उपयोग कर सकते हैं:

<i class="fa fa-check-circle-o fa-5x text-success" ></i>

अन्यथा:

<i class="fa fa-check-circle-o fa-5x" style="color:green"></i>

Comments

निश्चित रूप से सवाल का हल बूटस्ट्रैप का उपयोग करना शामिल नहीं है

— JG एस्टियोट

इसे बूटस्ट्रैप की आवश्यकता नहीं हो सकती है, लेकिन यह है कि मुझे यह प्रश्न कैसे मिला। धन्यवाद एल्ग्स!

— विल लवेट

आप स्क्रीनशॉट से देख सकते हैं कि वे पहले से बूटस्ट्रैप का उपयोग कर रहे हैं। यह एक ही रंग पैलेट को बनाए रखने के लिए और डुप्लिकेट कोड का उपयोग न करने के लिए इसका उपयोग करना समझ में आता है।

— साइमन लुइजक

सूक्ष्म लेकिन महत्वपूर्ण: पाठ-सफलता पाठ का रंग है, बीटीएन-सफलता के लिए बटन चेहरे का रंग नहीं। इसलिए यदि आप "फ्लैट बटन" जैसा दिखने के लिए एक आइकन चाहते हैं, तो पाठ-सफलता थोड़ी अलग होगी। मुझे लगता है कि यह पाठ-चेतावनी में सबसे स्पष्ट है, क्योंकि यह एक बहुत ही दिखाई देने वाले नारंगी के विपरीत एक बदसूरत पीला है

— जोश पेटिट

Answer 4

ऐसा लगता है कि FontAwesome आइकन रंग पाठ-जानकारी, पाठ-त्रुटि आदि के प्रति प्रतिक्रिया करता है।

<div style="font-size: 44px;">
   <i class="icon-umbrella icon-large text-error"></i>
</div>

Comments

बूटस्ट्रैप के लिए, <i class = "fa fa-चेतावनी पाठ-खतरा"> </ i>

— मैस्ट्रो

यह शायद इस पेज पर सबसे अच्छा जवाब है, कम से कम मेरे लिए, क्योंकि मैं पहले से ही बूटस्ट्रैप का उपयोग कर रहा हूं और यह उस प्रतिमान के साथ फिट बैठता है।

— जेक टोरंटो

Answer 5

inyour.css फ़ाइल:

    *.icon-white {color: white}
    *.icon-silver {color: silver}

inyour.html फ़ाइल:

    <a><i class="icon-book icon-white"></i> Book</a>
    <a><i class="icon-ok-sign icon-silver"></i> OK</a>

Answer 6

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

<!-- Font Awesome insert code -->
<script src="https://use.fontawesome.com/49b98aaeb5.js"></script>
<!-- End -->
<i class="fa fa-thumbs-up fa-5x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-4x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-3x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-2x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up" aria-hidden="true" style="color:#00cc6a"></i>

आप अपनी पसंद के लिए हेक्स कोड बदल सकते हैं। नोट: पाठ रंग आइकन रंग के साथ-साथ टैग के style="color:#00cc6a"भीतर होने तक भी बदल जाएगा i।

Answer 7

एफए 4.4.0 जोड़ने का उपयोग करना

.text-danger
    color: #d9534f

दस्तावेज़ सीएसएस और फिर का उपयोग करने के लिए

 <i class="fa fa-ban text-danger"></i>

रंग को लाल में बदलता है। आप किसी भी रंग के लिए अपना खुद का सेट कर सकते हैं।

Answer 8

For Size : fa-lg, fa-2x, fa-3x, fa-4x, fa-5x.

For Color : <i class="fa fa-link fa-lg" aria-hidden="true"style="color:indianred"></i>

For Shadow : .fa-linkedin-square{text-shadow: 3px 6px #272634;}

Answer 9

http://fortawesome.github.io/Font-Awesome/examples/

<i class="icon-thumbs-up icon-3x main-color"></i>

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

इस उदाहरण में उनकी वेबसाइट पर, और मैंने अपने उदाहरण में भी कैसे लिखा है, फ़ॉन्ट विस्मयकारी के नवीनतम संस्करण ने आकार को समायोजित करने के लिए वाक्यविन्यास को थोड़ा बदल दिया है।

icon-xxlarge

अब मुझे कहाँ उपयोग करना है:

icon-3x

बेशक, यह सब इस बात पर निर्भर करता है कि आपने अपने पर्यावरण पर फॉन्ट का कौन सा संस्करण स्थापित किया है। उम्मीद है की यह मदद करेगा।

Answer 10

FontAwesome 4.0 में, कक्षाएं 'fa-2x', 'fa-3x' में बदल जाती हैं।

Answer 11

बस आप अपनी सीएसएस फ़ाइल में एक वर्ग को परिभाषित कर सकते हैं और इसे html फ़ाइल की तरह कैस्केड कर सकते हैं

<i class="fa fa-plus fa-lg green"></i> 

अब सीएसएस में लिखें

.green{ color:green}

Answer 12

बस फ़ॉन्ट-भयानक पूर्वनिर्धारित वर्ग नाम लक्षित करें

पूर्व में:

एचटीएमएल

<i class="fa fa-facebook"></i> 

सीएसएस

i.fa {
    color: red;
    font-size: 30px;
}

Answer 13

कृपया http://www.w3schools.com/icons/fontawesome_icons_intro.asp लिंक देखें

<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>

<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>

Answer 14

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

Answer 15

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

(यह उत्तर उस उत्तर पर बनाता है )

(बुकमार्क आइकन के लिए, उदाहरण के लिए :)

inyour.css फ़ाइल:

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

inyour.html फ़ाइल:

<div class="icon-bookmark icon-white"></div>

Answer 16

I टैग को p या स्पैन में लपेटें, फिर आप बूटस्ट्रैप css क्लास का उपयोग कर सकते हैं

<p class="text-success"><i class="fa fa-check"></i></p>

Answer 17

के लिए फ़ॉन्ट बहुत बढ़िया 5 एसवीजी संस्करण, उपयोग

filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));

Answer 18

जैसा कि यह बताया गया है, फ़ॉन्ट भयानक आइकन पाठ हैं, फलस्वरूप आप इसे उपयुक्त सीएसएस विशेषताओं का उपयोग करके स्टाइल करते हैं। उदाहरण के लिए:

.fa-twitter-square {
    font-size: 15px;
    color: red;
}

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

.fa-twitter-square {
    font-size: 15px !important;
    color: red;
}

Answer 19

आकार देने के प्रतीक के लिए

हमारे वेब फ़ॉन्ट्स + सीएसएस और एसवीजी + जेएस फ्रेमवर्क दोनों में आपके पृष्ठ के UI के संदर्भ में माउस को आकार देने के लिए कुछ बुनियादी नियंत्रण शामिल हैं।

आप पसंद कर सकते हैं

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons

Answer 20

.Fa-xxx आइकनों के css गुणों को गतिशील रूप से बदलें:

<li class="nws">
<a href="#NewsModal" class="urgent" title="' + title + '" onclick=""><span class="label label-icon label-danger"><i class="fa fa-bolt"></i></span>' 
</a>
</li>
<script>
  $(document).ready(function(){
   $('li.nws').on("focusin", function(){
    $('.fa-bolt').addClass('lightning');
   });
 });
</script>

<style>
.lightning{ /*do something cool like shutter*/}
</style>

Answer 21

text-shadow: 1px 1px 3px rgba(0,0,0,0.5);

Answer 22

मैं आपको फॉन्ट-भयानक स्टाइल में निर्मित उपयोग करने की सलाह नहीं दूंगा जैसे कि fa-5x आदि; डर के कारण वे इसे बदल सकते हैं और आपको नवीनतम मानक के साथ मिलने के लिए अपने एप्लिकेशन कोड का पीछा करते रहना होगा। आप बस प्रत्येक फ़ॉन्ट-भयानक वर्ग को देकर इससे बचते हैं जिसे आप समान रूप से एक ही वर्ग शैली कहना चाहते हैं:

<i class="fa fa-facebook-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-twitter-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-google-plus-square fa-sabi-social-icons" aria-hidden="true"></i>

यहाँ वर्ग फा-सोबी-सोशल-आइकॉन है

फिर अपनी सीएसएस में आप उसी सीएसएस नियमों का उपयोग करके फोंट को स्टाइल कर सकते हैं, जिसके साथ आप एक सामान्य फॉन्ट को स्टाइल करेंगे। जैसे

.fa-sabi-social-icons {
     color: //your color;
     font-size: // your font-size in px, em or %;
     text-shadow: 2px 2px #FF0000;
}

कि आपके फॉन्ट-भयानक फोंट को स्टाइल किया जाना चाहिए