सीएसएस

Question

में उपयोग फ़ॉन्ट बहुत बढ़िया प्रतीक मैं कुछ सीएसएस है कि इस तरह दिखता है।

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

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; 
} 

Answer 2

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

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

Answer 3

सीएसएस में सामग्री एम्बेड करने की कोई ज़रूरत नहीं। आप बैज सामग्री को एफए तत्व के अंदर रख सकते हैं, फिर बैज सीएसएस समायोजित करें। 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> 

Answer 4

खान में

इस सीएसएस

.adminheader: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 5

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

.faArrowIcon { 
     position:relative; 
    } 

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

Answer 6

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

Answer 7

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

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

Answer 8

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

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

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