CSS में Font Awesome Icons का उपयोग करें

Question

मेरे पास कुछ सीएसएस है जो इस तरह दिखता है:

#content h2 {
   background: url(../images/tContent.jpg) no-repeat 0 6px;
}

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

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

Comments

फोंट से ग्लिफ़ को पृष्ठभूमि के रूप में इस्तेमाल नहीं किया जा सकता है। SVGs, हालांकि, कर सकते हैं

— cimmanon

@cimmanon आपको यह समझाएंगे कि कैसे यह फ़ॉन्ट-भयानक पर लागू हो सकता है

— बोनसाईऑक

@BonsaiOak चयनित उत्तर द्वारा पहले से ही समझाया नहीं गया है कि क्या समझाने के लिए है? यदि आपके पास कोई ऐसा प्रश्न है जिसका उत्तर इस पर नहीं दिया गया है (या SO पर कोई अन्य प्रश्न), तो एक नया प्रश्न पूछें।

— cimmanon

@cimmanon स्पष्टता की कमी के लिए खेद है। आपको यह प्रतीत होता है कि पृष्ठभूमि के रूप में फ़ॉन्ट-भयानक.svg फ़ॉन्ट फ़ाइल से आइकन का उपयोग करना संभव था। हालाँकि, आपने कभी नहीं कहा कि स्पष्ट रूप से मुझे यकीन नहीं है।

— बोन्साईओक सिप

@ बोनसाईऑक हां, आप एक एसवीजी को पृष्ठभूमि छवि के रूप में उपयोग कर सकते हैं, उसी तरह आप किसी अन्य छवि का उपयोग करेंगे। हालाँकि, मैंने वास्तव में FontAwesome SVG को यह सत्यापित करने के लिए नहीं देखा है कि इसका उपयोग इस तरह से किया जा सकता है।

— साइमन

Answer 1

आप टेक्स्ट को बैकग्राउंड इमेज के रूप में उपयोग नहीं कर सकते हैं, लेकिन आप टेक्स्ट कैरेक्टर को रखने के लिए :beforeया :afterछद्म कक्षाओं का उपयोग कर सकते हैं, जहां आप इसे चाहते हैं, बिना सभी प्रकार के गन्दा अतिरिक्त मार्क-अप जोड़ने के लिए।

position:relativeकाम करने की स्थिति के लिए अपने वास्तविक पाठ आवरण पर सेट करना सुनिश्चित करें ।

.mytextwithicon {
    position:relative;
}    
.mytextwithicon:before {
    content: "\25AE";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }

संपादित करें:

फ़ॉन्ट विस्मयकारी v5 पुराने संस्करणों की तुलना में अन्य फ़ॉन्ट नामों का उपयोग करता है:

• FontAwesome v5 के लिए, नि: शुल्क संस्करण, उपयोग: font-family: "Font Awesome 5 Free"
• FontAwesome v5 के लिए, प्रो संस्करण, उपयोग: font-family: "Font Awesome 5 Pro"

ध्यान दें कि आपको एक ही फ़ॉन्ट-भार वाली संपत्ति सेट करनी चाहिए , वह भी (900 की लगती है)।

फ़ॉन्ट नाम खोजने का दूसरा तरीका है कि अपने पृष्ठ पर एक नमूना फ़ॉन्ट भयानक आइकन पर राइट क्लिक करें और फ़ॉन्ट नाम प्राप्त करें (उसी तरह utf-8 आइकन कोड पाया जा सकता है, लेकिन ध्यान दें कि आप इसे खोज सकते हैं :before)।

Comments

प्रत्येक आइकन के पाठ बराबर है वहाँ fortawesome.github.io/Font-Awesome/cheatsheet

— माथीउ

आपको शुरुआत से & # x को निकालना होगा; अंत से। फॉन्ट-फैमिली का नाम FontAwesome

— Matthieu

@ डेविड, यह सिर्फ पाठ है, उपयोग करें font-size।

— JCM

FontAwesome v5 के लिए आपको उपयोग करने की आवश्यकता है .backspace:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f55a"; }

— Digvijayad

बस एक नोट है कि यह इनपुट तत्वों (जैसे एक सबमिट बटन) के साथ काम नहीं करता है क्योंकि वे समर्थन नहीं करते हैं: पहले या बाद में।

— मीर

Answer 2

उपरोक्त डायोडस के उत्तर से आगे, आपको font-family: FontAwesomeनियम की आवश्यकता है (यह मानते हुए कि आपके पास @font-faceअपने सीएसएस में पहले से घोषित FontAwesome के लिए नियम है)। फिर यह जानने की बात है कि सीएसएस सामग्री मूल्य किस आइकन से मेल खाती है।

मैंने उन सभी को यहां सूचीबद्ध किया है: http://astronautweb.co/snippet/font-awesome/

Comments

काम के बाद मैंने हटा दिया स्थिति: पूर्ण; .में: पहले, अब मैं अपने लिंक को फ़ॉन्ट विस्मयकारी आइकनों से सजा सकता हूं, लेकिन लिंक के अपने कस्टम फ़ॉन्ट को बनाए रख सकता हूं

— jethroo

सामग्री मूल्यों की महान सूची!

— एंथनी

: जैसा कि @staabm द्वारा जवाब में बताया गया है, FontAwesome प्रत्येक ग्लिफ़ के लिए कोड के एक अधिकारी सूची रखता है fontawesome.io/cheatsheet

— ALXNDR

Answer 3

वास्तव में यहां तक ​​कि font-awesomeसीएसएस के पास अपनी आइकन शैलियों को स्थापित करने के लिए एक समान रणनीति है। यदि आप icon कोड की एक त्वरित पकड़ प्राप्त करना चाहते हैं , तो non-minified font-awesome.cssफ़ाइल की जाँच करें और वे वहां हैं .... प्रत्येक फ़ॉन्ट इसकी शुद्धता में।

Answer 4

उपरोक्त सभी चीजों को समेकित करते हुए, निम्नलिखित अंतिम वर्ग है जो अच्छी तरह से काम करता है

   .faArrowIcon {
        position:relative;
    }

    .faArrowIcon:before {
        font-family: FontAwesome;
        top:0;
        left:-5px;
        padding-right:10px;
        content: "\f0a9"; 
    }

Comments

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

— andygoestohollywood

Answer 5

आप इस उदाहरण वर्ग की कोशिश कर सकते हैं। और यहां आइकन सामग्री ढूंढें: http://astronautweb.co/snippet/font-awesome/

  #content h2:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    content: "\f007";
    }

Answer 6

नीचे दिए गए चरणों का अनुसरण करते हुए फॉन्ट भयानक का उपयोग करने के लिए -

चरण 1 - सीएसएस में FontAwesome के फोंट जोड़ें

/*Font Awesome Fonts*/
@font-face {
    font-family: 'FontAwesome';
    //in url add your folder path of FontAwsome Fonts
    src: url('font-awesome/fontawesome-webfont.ttf') format('truetype');
}

Step - 2 HTML के क्लास एलिमेंट पर फॉन्ट लगाने के लिए css के नीचे इस्तेमाल करें

.sorting_asc:after {
    content: "\f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    padding-left: 10px !important;
    vertical-align: middle;
}

और अंत में, वांछित HTML टैग / तत्व पर सीएसएस लागू करने के लिए " सॉर्टिंग_स्कूल " वर्ग का उपयोग करें ।

Answer 7

सीएसएस में सामग्री को एम्बेड करने की आवश्यकता नहीं है। आप बैज कंटेंट को एफई एलिमेंट के अंदर रख सकते हैं, फिर बैज सीएसएस को एडजस्ट कर सकते हैं। http://jsfiddle.net/vmjwayrk/2/

<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
  <span style="
        background-color: navy;
        border-radius: 50%;
        font-size: .25em;
        display:block;
        position:absolute;
        text-align: center;
        line-height: 2em;
        top: -.5em;
        right: -.5em;
        width: 2em;
        height: 2em;
        border:solid 4px #fff;
        box-shadow:0px 0px 1px #000;
        color: #fff;
    ">17</span>
</i>

Comments

"सीएसएस में सामग्री को एम्बेड करने की आवश्यकता नहीं है"। खैर, कुछ स्थितियों में इसकी जरूरत है।

— स्टीफन ब्रुकर्ट

यदि आप प्रगतिशील वृद्धि के बारे में परवाह नहीं करते हैं, तो यह ठीक है, लेकिन आपको जब भी संभव हो, अपने स्टाइल को css फ़ाइल के अंदर रखना चाहिए।

— एडम कैर

Answer 8

वैकल्पिक रूप से, यदि Sass का उपयोग किया जाता है, तो कोई उन्हें प्रदर्शित करने के लिए FA आइकनों का "विस्तार" कर सकता है:

.mytextwithicon:before {
  @extend .fas, .fa-angle-double-right;

  @extend .mr-2; // using bootstrap to add a small gap
                 // between the icon and the text.
}

Answer 9

#content h2:before {
    content: "\f055";
    font-family: FontAwesome;
    left:0;
    position:absolute;
    top:0;
}

उदाहरण लिंक: https://codepen.io/bungeedesign/pen/XqeLQg

से आइकन कोड प्राप्त करें: https://fontawesome.com/cheatsheet?from=io

Answer 10

इसके लिए बस आपको contentविशेषता जोड़ने की जरूरत है औरfont-family आवश्यक तत्व में विशेषता की आवश्यकता है: जहां भी लागू हो, उससे पहले या बाद में।

उदाहरण के लिए: मैं अपनी पोस्ट के अंदर सभी तत्व के बाद एक अटैचमेंट आइकन संलग्न करना चाहता था a। इसलिए, सबसे पहले मुझे यह खोजना होगा कि क्या फॉन्टवॉश में ऐसा आइकन मौजूद है। जैसे कि मैंने इसे यहाँ पाया , अर्थात fa fa-paperclip। फिर मैं वहां आइकन पर क्लिक करूंगा, और ::beforeछद्म संपत्ति पर जाकर उस contentटैग को प्राप्त कर सकता हूं, जिसका उपयोग वह कर रहा है, जो मेरे मामले में मुझे मिला था \f0c6। तो मैं इस तरह से अपने सीएसएस में उपयोग करेगा:

   .post a:after {
     font-family: FontAwesome,
     content: " \f0c6" /* I added a space before \ for better UI */
    }

Answer 11

फ़ॉन्ट-विस्मयकारी आइकन से png चित्र बनाने के लिए कमांड लाइन के माध्यम से निम्नलिखित पायथन प्रोग्राम का उपयोग करें:

https://github.com/Pythonity/font-awesome-to-png

Comments

नए संस्करण के साथ github.com/Pythonity/icon-font-to-png

— pawel.ad