CSS सामग्री के रूप में फ़ॉन्ट विस्मयकारी आइकन का उपयोग करें

Question

मैं CSS सामग्री के रूप में फ़ॉन्ट विस्मयकारी आइकन का उपयोग करना चाहता हूं, अर्थात,

a:before {
    content: "<i class='fa...'>...</i>";
}

मुझे पता है कि मैं HTML कोड का उपयोग नहीं कर सकता content, तो क्या यह केवल छवियां हैं?

Comments

मेमोरी से आप सामग्री विशेषता का उपयोग करके HTML को DOM में इंजेक्ट नहीं कर सकते। बस सादा पुराना पाठ।

— माइक काउसर

Answer 1

FontAwesome 5 ^{के लिए} अपडेट ^{औरेलियन के लिए धन्यवाद}

आप को बदलने की जरूरत font-familyकरने के लिए Font Awesome 5 Brandsया Font Awesome 5 Freeआइकन आप रेंडर करने के लिए कोशिश कर रहे हैं के प्रकार के आधार,। इसके अलावा, घोषणा करने के लिए मत भूलनाfont-weight: 900;

a:before {
   font-family: "Font Awesome 5 Free";
   content: "\f095";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-weight: 900;
}

डेमो

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

---

FontAwesome 4 और नीचे

इसका उपयोग करने का यह गलत तरीका है। फ़ॉन्ट भयानक शैली पत्रक खोलें, उस फ़ॉन्ट पर जाएं जिसे classआप उपयोग करना चाहते हैं fa-phone, इकाई के साथ उस वर्ग के अंतर्गत सामग्री संपत्ति की प्रतिलिपि बनाएँ, और इसका उपयोग करें:

a:before {
    font-family: FontAwesome;
    content: "\f095";
}

डेमो

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

a.class_name:before {
    font-family: FontAwesome;
    content: "\f095";
}

ऊपर दिए गए तरीके का उपयोग करने से आप के बचे हुए पाठ के साथ आइकन चिपक जाएगा, इसलिए यदि आप उन दोनों के बीच थोड़ी जगह चाहते हैं, तो इसे बनाएं display: inline-block;और कुछ का उपयोग करें padding-right:

a:before {
    font-family: FontAwesome;
    content: "\f095";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
}

---

इस उत्तर को आगे बढ़ाते हुए, क्योंकि कई को होवर पर आइकन बदलने की आवश्यकता हो सकती है, इसलिए इसके लिए, हम एक अलग चयनकर्ता और :hoverकार्रवाई के लिए नियम लिख सकते हैं :

a:hover:before {
    content: "\f099"; /* Code of the icon you want to change on hover */
}

डेमो

अब उपरोक्त उदाहरण में, आइकन अलग-अलग आकार के कारण nudges करता है और आप निश्चित रूप से ऐसा नहीं चाहते हैं, इसलिए आप widthबेस घोषणा पर एक निश्चित सेट कर सकते हैं जैसे

a:before {
    /* Other properties here, look in the above code snippets */
    width: 12px; /* add some desired width here to prevent nudge */
}

डेमो

Comments

फ़ॉन्ट विस्मयकारी में यूनिकोड चरित्र कोड की आधिकारिक सूची के लिए यहां देखें ।

— बोआज

इसके साथ font-family: FontAwesome;एंकर टैग के लिए फ़ॉन्ट भी बदलता है। हम इसे कैसे संभाल सकते हैं?

— शुभ

@ शुभा ने कोड को ध्यान से पढ़ा, font-familyमाना जाता है कि उसे :beforeछद्म पर बुलाया जाएगा और लंगर टैग नहीं

— श्री एलियन

बस मैंने सोचा कि मैं यहां जोड़ दूंगा कि आप स्रोत में खुदाई किए बिना एक विशेष आइकन के लिए यूनिकोड कल्पना पा सकते हैं। बस फ़ॉन्ट भयानक वेबसाइट पर आइकन की सूची पर जाएं और इच्छित आइकन पर क्लिक करें। आप आइकन के नमूने के ठीक नीचे पृष्ठ पर यूनिकोड का मूल्य देखेंगे: Fortawesome.github.io/Font-Awesome/icon/pencil-square-o

— एलन अंडरवुड

FontAwesome के लिए यह सीएसएस यूनिकोड सूची बेहतर है: astronautweb.co/snippet/font-awesome क्योंकि यह contentडायरेक्ट कॉपी करने के लिए सही कोड दिखाता है (यानी कोई ब्रेनर)। पुनश्च: मुझे अभी भी आश्चर्य है कि FontAwesome लोग प्रत्येक आइकन पृष्ठ पर सामग्री कोड क्यों नहीं डालते हैं ?!

— काई नैक

Answer 2

यूनिकोड वर्णों के साथ मैन्युअल रूप से गड़बड़ करने के लिए आपके बिना एक और समाधान फ़ॉन्ट बनाने में पाया जा सकता है भयानक - मैं-टैग के बिना आइकन का उपयोग करना ( अस्वीकरण: मैंने यह लेख लिखा था )।

संक्षेप में, आप इस तरह एक नया वर्ग बना सकते हैं:

.icon::before {
    display: inline-block;
    margin-right: .5em;
    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);
}

और फिर किसी भी आइकन के साथ इसका उपयोग करें, उदाहरण के लिए:

<a class="icon fa-car" href="#">This is a link</a>

Answer 3

यदि आपके पास फ़ॉन्ट-भयानक से SCSS फ़ाइलों तक पहुंच है, तो आप इस सरल समाधान का उपयोग कर सकते हैं:

.a:after {
    // Import mixin from font-awesome/scss/mixins.scss
    @include fa-icon();

    // Use icon variable from font-awesome/scss/variables.scss
    content: $fa-var-exclamation-triangle;
}

Answer 4

a: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 5

आप CSS में इसके लिए यूनिकोड का उपयोग कर सकते हैं। यदि आप फ़ॉन्ट भयानक 5 का उपयोग कर रहे हैं, तो यह वाक्यविन्यास है;

.login::before {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f007";  
}

आप उनके दस्तावेज़ यहाँ देख सकते हैं ।

Answer 6

आपके पास फ़ॉन्ट विस्मयकारी 900 के लिए फ़ॉन्ट विस्मयकारी 5 मुक्त फ़ॉन्ट-परिवार के लिए सेट होना चाहिए ।

यह काम कर रहा है:

.css-selector::before {
   font-family: 'Font Awesome 5 Free';
   content: "\f101";
   font-weight: 900;
}

Answer 7

जैसा कि यह FontAwesome वेबसाइट FontAwesome => पर कहता है

HTML:

<span class="icon login"></span> Login</li>

सीएसएस:

 .icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

    .login::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f007";
   }

में .login::before-> content:'';अपने यूनिकोड के अनुरूप संपादित करें ।

Answer 8

SCSS का उपयोग कर फ़ॉन्ट 5 के लिए अद्यतन

.icon {
  @extend %fa-icon;
  @extend .fas;

  &:before {
    content: fa-content($fa-var-user);
  }
}

Answer 9

यहां मेरा वेबपैक 4 + फ़ॉन्ट भयानक 5 समाधान है:

वेबपैक प्लगइन:

new CopyWebpackPlugin([
    { from: 'node_modules/font-awesome/fonts', to: 'font-awesome' }
  ]),

वैश्विक सीएसएस शैली:

@font-face {
    font-family: 'FontAwesome';
    src: url('/font-awesome/fontawesome-webfont.eot');
    src: url('/font-awesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
    url('/font-awesome/fontawesome-webfont.woff2') format('woff2'),
    url('/font-awesome/fontawesome-webfont.woff') format('woff'),
    url('/font-awesome/fontawesome-webfont.ttf') format('truetype'),
    url('/font-awesome/fontawesome-webfont.svgfontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

i {
    font-family: "FontAwesome";
}