फ़ॉन्ट बहुत बढ़िया काम नहीं कर रहा है, वर्गों के रूप में दिखा रहे आइकन

224

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

यहां बताया गया है कि मैं सिर में फाइलें कैसे शामिल करता हूं:

<head>
        <title>Page Title</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/app.css">
        <!--[if IE 7]>
            <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
        <![endif]-->
</head>

और यहाँ मेरा एक उदाहरण एक आइकन का उपयोग करने की कोशिश कर रहा है:

<i class="icon-camera-retro"></i>

लेकिन वह सब एक बड़े वर्ग में मिलता है। क्या किसी को पता है कि क्या हो सकता है?

css  html  twitter-bootstrap  font-awesome 
— कॉनर ब्लैक
स्रोत
1
क्या आप फ़ॉन्ट आयात कर रहे हैं?
— मई
1
शायद ऩही। मुझे लगा कि आपको केवल .cssफ़ाइल को शामिल करना होगा ।
— कॉनर ब्लैक
2
शीर्षक का अर्थ है कि समस्या क्रोम के लिए विशिष्ट है। क्या यह अन्य ब्राउज़रों में लोड हो रहा है या संदर्भित फ़ॉन्ट फ़ाइल 404 है?
— सिमनमन
1
अगस्त 2016 के रूप में उपरोक्त लिंक पर चरण 3 नहीं मिल सकता है ... कोई पुनर्निर्देशन ??
— सौरभ तिवारी
1
शायद आप webfont फ़ोल्डर की नकल भूल गए?
— १hat पर रात्रि .:

जवाबों:

149

के अनुसार प्रलेखन (कदम 3), आप अपनी साइट पर फ़ॉन्ट स्थान इंगित को आपूर्ति सीएसएस फ़ाइल को संशोधित करने की जरूरत है।

— mayhewr
स्रोत
5
महान जवाब, बस कुछ अतिरिक्त जानकारी देने के लिए, आप सीएसएस द्वारा प्रदान किए गए डिफ़ॉल्ट पथ में फोंट को भी रख सकते हैं, बस फ़ॉन्ट-भयानक खोल सकते हैं। आप निम्नलिखित प्रविष्टि पाएंगे: @ फॉन्ट-फेस {फॉन्ट-परिवार: 'FontAwesome'; src: url ('.. / font / fontawesome-webfont.eot; v = 3.2.1'); src: url ('../ फॉन्ट / fontawesome-webfont.eot? # iefix & v = 3.2.1')
— Braulio
1
बस उसी समस्या वाले ASP.NET MVC पाठकों के भविष्य के लिए: यदि आपके पास सभी फ़ोल्डर सही जगह पर हैं, तो सत्यापित करें कि आपने अपने web.config फ़ाइल पर MIME प्रकार को यहां बताया है: stackoverflow.com/questions/4015816-…
— jpgrassi 13
1
यदि आप डेटा URI स्कीम का उपयोग फ़ॉन्ट के बेस 64 संस्करण के साथ करते हैं (आसानी से ऑनलाइन रूपांतरित कर सकते हैं), तो आपको उचित फ़ाइल पथ और संसाधन होस्टिंग के बारे में चिंता करने की आवश्यकता नहीं है।
— RenaissanceProgrammer
नोट : यदि आप सीएसएस को संशोधित नहीं करना चाहते हैं, तो बस सीएसएस और फोंट को एक ही फ़ोल्डर में रखें, यह
— 15'15
7
@ ततुका: हर कोई सीडीएन का उपयोग नहीं कर सकता है।
— ऑर्बिट
188

आप 2 कक्षाएं, होनी चाहिए faवर्ग और वर्ग की पहचान करता है वांछित आइकन fa-twitter, fa-search, आदि ...

<!-- Wrong -->
<i class="fa-search"></i>    

<!-- Correct -->
<i class="fa fa-search"></i>
— नाबिल कादिमी
स्रोत
4
यह शीर्ष उत्तर होना चाहिए, सीएसएस ने फ़ॉन्ट फ़ाइलों के लिए सही स्थान पर अंक प्रदान किए जब तक कि आप उन्हें स्थानांतरित न करें - यह मुझे दीवार को धन्यवाद दे रहा था
— एलेक्स 3410
5
नोट: "संस्करण उपसर्ग 5 संस्करण में पदावनत किया गया है। नया डिफ़ॉल्ट फ़ैस ठोस शैली और ब्रांडों के लिए फ़ेस शैली है।"
— टेर्जे सोलेम
1
यह मेरे लिए तय हो गया! मैं प्राइमेंग के साथ कोणीय (5 मुझे लगता है) का उपयोग कर रहा है और ऐसा लगता है, कि फ़ॉन्ट-भयानक पहले से ही के लिए काम किया है जैसे कि मेनू मेनू-परिभाषाएँ xx.component.ts (सही ढंग से प्रदान किए गए आइकन) के अंदर। हालाँकि: जब xx.component.html (जैसे एक आइकन के साथ p- बटन) में कुछ जोड़ते हैं, तो एक को एफए क्लास और एफए जोड़ना होगा- <जो भी आइकन>!
— इगोर
1
@TerjeSolem आपके द्वारा दी गई जानकारी बहुत महत्वपूर्ण है। इसने मेरी समस्या हल कर दी। के रूप में मैं पुराने संस्करण का उपयोग कर रहा था, लेकिन "
— फैस
बहुत बहुत धन्यवाद! मुझे ओपन आइकन्स ओई ओई -... के साथ वैसा ही मिला, पहला ओय खोया।
— एलेक्जेंड्रा
54

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

मेरे पास अमेज़ॅन क्लाउडफ्रंट सीडीएन के साथ ऐसा ही मुद्दा था, लेकिन इसे अधिकतम करने के बाद मैंने इसे लोड करना शुरू कर दिया

— कुमार दीपम
स्रोत
6
यह मानता है कि आप फ़ॉन्ट-भयानक CDN का उपयोग करना चाहते हैं। एक व्यावसायिक उत्पादन वातावरण के लिए मैं ऐसा नहीं करूंगा।
— जय एडवर्ड्स
48

यह मदद कर सकता है, यह सुनिश्चित करने के लिए जांचें कि आपने अनजाने में आइकन पर फ़ॉन्ट परिवार को नहीं बदला है । यदि आपने .fa आइटम के फ़ॉन्ट परिवार को इससे बदल दिया है: FontAwesome आइकन नहीं दिखाएगा। यह हमेशा कुछ मूर्खतापूर्ण और छोटा होता है।

आशा है कि किसी की मदद करता है।

— Bren1818
स्रोत
11
बिंगो! बहुत बहुत धन्यवाद। मेट्रो-यूआई फ़ॉन्ट-भयानक फ़ॉन्ट-परिवार से आगे निकल रहा था। मुझे इसे जोड़ना पड़ा: .fa {font-family: 'FontAwesome'! महत्वपूर्ण } फिर इसने काम किया।
— डेबी ए
1
हां। मूर्ख और छोटा। यह - किसी और चीज़ के लिए फ़ॉन्ट बदलना और फॉन्टवॉच आइकनों को प्रभावित करना - मेरे साथ ऐसा कई बार हुआ कि यह बेवकूफी बन रहा है।
— एड
2
हाँ - यह पंक्ति दोष देने के लिए थी (और अधिक विशिष्ट होने के लिए; महत्वपूर्ण नियम): * {फ़ॉन्ट-परिवार: 'सोर्स प्रोन्स प्रो'
— श्वेत
1
किसी परेशानी का समय खोने से बचने के लिए Font Awesome का उपयोग करने के बारे में यह सबसे महत्वपूर्ण और उपयोगी टिप है।
— डेज
22

यदि आप LESS या SASS का उपयोग कर रहे हैं, तो फॉन्ट-भययोग्य / बिना / sass फ़ाइल खोलें और उस पथ चर को संपादित करें @fa-font-path: "../font";जो वास्तविक फोंट की ओर इशारा करता है:

@fa-font-path: "../font";

@font-face {
  font-family: 'FontAwesome';
  src: url('@{fa-font-path}/fontawesome-webfont.eot?v=3.0.1');
  src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('@{fa-font-path}/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('@{fa-font-path}/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

सीएसएस के साथ समान, सिवाय इसके कि आप @ फॉन्ट-फेस डिक्लेरेशन ब्लॉक में पथ संपादित करें:

@font-face {
  font-family: 'FontAwesome';
  src: url('your/path/fontawesome-webfont.eot?v=3.0.1');
  src: url('your/path/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('your/path/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('your/path/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}
— jonschlinkert
स्रोत
वहाँ उन सभी के बजाय केवल कुछ चिह्न आयात करने का एक तरीका है? मैं केवल कुछ आइकन पर अपनी सीएसएस फ़ाइल संकलित करना चाहूंगा।
— user805981
@fa-font-path: "../fonts";मेरे लिए काम किया। (गुम sगयी सूचना पर गौर करें )
— प्राग्रामर
18

अपना फ़ॉन्ट-भयानक खोलें।

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

आपके पास फ़ोल्डर होना चाहिए जैसे:

font awesome -> css
             -> fonts

या सबसे आसान तरीका:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
— एर्गा कांडली
स्रोत
13

मैंने कुछ पिछले समाधानों के साथ उसी समस्या को हल करने की कोशिश की, लेकिन उन्होंने मेरी स्थिति में काम नहीं किया। अंत में, मैंने HEAD में इन 2 लाइनों को जोड़ा और यह काम किया:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
— वोजकन सिवजनोविक
स्रोत
12

मैं यहाँ उल्लेख के अनुसार , अधिकतम एलसीडीFont Awesome 4.3.0 लिंक से काम कर रहा हूँ

लेकिन अपने सर्वर में होस्ट करने के लिए एक ही फ़ोल्डर में फोंट और सीएसएस डालना मेरे लिए काम करता है, इस तरह

यहां छवि विवरण दर्ज करें

तो बस सीएसएस लिंक:

<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />

आशा किसी की मदद करती है।

— shaijut
स्रोत
8

आपके पास 2 कक्षाएं होनी चाहिए, fas वर्ग और पिता वर्ग, शायद यह काम करेगा:

// Wrong
<i class="fas fa-search"></i>    

// Correct
<i class="fa fa-search"></i>
— इजराइल
स्रोत
3
इसका एहसास नहीं हुआ - v5 से उन्हें अब कक्षा के बजाय एक कक्षा fabया fasकक्षा की आवश्यकता है fa।
— इचिलन
7

मेरे पास यह मुद्दा था। समस्या यह थी कि मेरे पास फ़ॉन्ट-परिवार सीएसएस शैली थी!

— जॉनी व्हाइट
स्रोत
मेरे पास एक ही मुद्दा था * {font-family: Helvetica, sans-serif! Important; }
— डब्बू
6

यदि आप मावेन और अपाचे विकेट के साथ काम कर रहे हैं, तो फॉन्ट-भयानक के साथ समस्या को हल करने की कोशिश करने के लिए निम्नलिखित की जांच करें और आइकन लोड नहीं हो रहे हैं:

यदि आपने अपनी फ़ाइल को निम्न फ़ाइल संरचना में उदाहरण के लिए रखा है

/src
 /main
  /java
   /your
    /package
     /css
      font-awesome.css
     /font
      fontawesome-webfont.eot
      fontawesome-webfont.svg
      fontawesome-webfont.svgz
      fontawesome-webfont.ttf
      fontawesome-webfont.woff

चेक 1) क्या आप फॉन्ट फाइलों को सही ढंग से लोड करने की अनुमति देने के लिए पैकेज रिसोर्स गार्ड का सही ढंग से उपयोग कर रहे हैं?

अपने वर्ग से उदाहरण जो WebApplication बढ़ाता है:

@Override
public void init() {
    super.init();   
    get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());

}

2 जांचें) जब आपने यह सुनिश्चित कर लिया है कि सभी फोंट वेब ब्राउजर में सही ढंग से ट्रांसफर हो गए हैं, तो यह जांच लें कि क्या वास्तव में वेब ब्राउजर में ट्रांसफर किया गया है, यानी फॉन्ट फाइल्स की अखंडता बदल गई है? अपने स्रोत निर्देशिका में फ़ाइलों की तुलना करें और फ़ायरफ़ॉक्स और डिफडॉग के वेब डेवलपर टूलबार (फ़ाइल तुलना के लिए) का उपयोग करके वेब ब्राउज़र को हस्तांतरित फ़ाइलें।

विशेष रूप से यदि आप मावेन का उपयोग कर रहे हैं तो संसाधन फ़िल्टरिंग के बारे में जागरूक रहें। उस फ़ोल्डर को फ़िल्टर न करें जहां आपकी / फ़ॉन्ट फ़ाइलें सम्‍मिलित हैं - अन्यथा वे दूषित हो जाएंगे।

अपने pom.xml से उदाहरण

<build>
    <finalName>Your project</finalName>
    <resources>
        <resource>
            <filtering>true</filtering>
            <directory>src/main/resources</directory>
        </resource>
        <resource>
            <filtering>false</filtering>
            <directory>src/main/java</directory>
            <includes>
                <include>**</include>
            </includes>
            <excludes>
                <exclude>**/*.java</exclude>
            </excludes>
        </resource>
    </resources>
</build>

ऊपर दिए गए उदाहरण में हम फ़ोल्डर src / main / java को फ़िल्टर नहीं करते हैं, जहाँ css और font फाइलें समाहित हैं।

बाइनरी डेटा के फ़िल्टरिंग के बारे में अधिक जानकारी के लिए कृपया दस्तावेज़ भी देखें:

http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html

विशेष रूप से प्रलेखन चेतावनी देता है: " चेतावनी: छवियों की तरह द्विआधारी सामग्री के साथ फ़ाइलों को फ़िल्टर न करें! यह भ्रष्ट आउटपुट में सबसे अधिक संभावना होगा। यदि आपके पास संसाधन के रूप में पाठ फ़ाइलें और बाइनरी फ़ाइल दोनों हैं, तो आपको दो परस्पर अनन्य संसाधन सेट घोषित करने की आवश्यकता है। पहला संसाधन सेट फ़िल्टर की जाने वाली फ़ाइलों को परिभाषित करता है और दूसरा संसाधन सेट फ़ाइलों को अनलॉक्ड कॉपी करने के लिए परिभाषित करता है ... "

— फिलिप
स्रोत
6

मेरे पास यह मुद्दा था और प्रत्येक चरण को ध्यान से जाना ... भले ही मैं उम्र के लिए एफए का उपयोग कर रहा हूं ... और फिर मुझे एहसास हुआ कि मेरी मेल सीएसएस फ़ाइल में यह रेखा थी:

* {
font-family: Arial !important;
}

मूर्खतापूर्ण गलती, लेकिन यह भविष्य में किसी को टिप दे सकता है!

— जे डो
स्रोत
4

आप शीर्ष लेख लौटना चाहिए पहुंच-नियंत्रण-अनुमति दें-उत्पत्ति के लिए * अपने फोंट फ़ाइलों के लिए

— इलेक्ट्रॉनिक
स्रोत
2
बिल्कुल सही! अपने फ़ॉन्ट भयानक फ़ाइलों की सेवा के लिए तीसरे पक्ष के प्रदाताओं का उपयोग करना आपकी समस्या को हल नहीं करता है, आप इसे हल करने के लिए दूसरों को दे रहे हैं।
— सिमंस
4

दिसंबर 2018 तक, मुझे अपनी वेबसाइट पर फ़ॉन्ट-भयानक 5.xx cdn के बजाय बूटस्ट्रैप एलसीडी पर होस्ट किए गए स्थिर संस्करण 4.7.0 का उपयोग करना आसान लगता है - क्योंकि हर बार जब वे मामूली संस्करणों को अपग्रेड करते हैं तो पिछला संस्करण टूट जाएगा।

<link media="all" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

प्रतीक समान हैं:

<i class="fa fa-facebook"></i>
— ehacinom
स्रोत
3

यदि आपका सर्वर IIS है, तो .woff फ़ाइल एक्सटेंशन की सेवा करने के लिए सही MIME जोड़ना सुनिश्चित करें। सही MIME हैapplication/octet-stream

— दारियो ब्रिगोन
स्रोत
यदि आप IIS 7 का उपयोग कर रहे हैं, तो आप यहां प्रक्रिया का पालन कर सकते हैं: technet.microsoft.com/en-us/library/cc725608(v=ws.10).aspx
— dresh
3

font-weight: 900;

मैं फ़ॉन्ट विस्मयकारी 5. के साथ एक अलग मुद्दा था 5. फ़ॉन्ट फ़ॉन्ट के लिए डिफ़ॉल्ट फ़ॉन्ट-वजन 900 होना चाहिए, लेकिन मैंने इसे स्पैन और आई टैग के लिए 400 में ओवरवोट कर दिया। यह सिर्फ काम किया, जब मैंने इसे सही किया।

यहाँ उनके Github पृष्ठ, https://github.com/FortAwesome/Font-Awesome/issues/11946 में मुद्दा संदर्भ है

मुझे उम्मीद है कि यह किसी की मदद करेगा।

— manian
स्रोत
1
धन्यवाद कि मेरा मुद्दा भी था। मैंने फ़ॉन्ट-परिवार को "फ़ॉन्ट विस्मयकारी 5 नि: शुल्क" पर सेट किया, लेकिन फ़ॉन्ट-वजन सेट करने के लिए 900 भी चाहिए!
— हंस वॉन
3

यदि आप संस्करण 5. * या अधिक का उपयोग कर रहे हैं, तो आपको उपयोग करना होगा

all.css या all.min.css

Fontawesome.css को शामिल करने से काम नहीं चलता क्योंकि इसमें वेबफोन्स फोल्डर का कोई संदर्भ नहीं है और @ फॉन्ट-फेस या फॉन्ट-परिवार का कोई संदर्भ नहीं है

आप fontawesome.css या fontawesome.min.css में फ़ॉन्ट-परिवार की संपत्ति के लिए कोड खोजकर इसका निरीक्षण कर सकते हैं

— the_haystacker
स्रोत
यह मेरे लिए एक सही समाधान था - बहुत बुरा जवाब नीचे अब तक है, मैंने इसे नहीं देखा था और इसे खुद से पता लगाना था
— कोल्ड_क्लास
2

यह संभव हो सकता है कि आपका फ़ॉन्ट पथ सही नहीं है, ताकि css फ़ॉन्ट को लोड करने में सक्षम न हो और आइकन को रेंडर कर सके ताकि आपको संलग्न फोंट के फंसे हुए मार्ग को प्रदान करने की आवश्यकता हो।

@font-face { 
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}
— SantoshK
स्रोत
2

5 संस्करण से शुरू, अगर आपने इस साइट से पैकेज डाउनलोड किया है:

https://fontawesome.com/download

फॉन्ट all.css और all.min.css फ़ाइल में हैं।

यह वही है जो आपका संदर्भ अब नवीनतम संस्करण का उपयोग करने जैसा लगेगा (आपके फ़ोल्डर के साथ बदलें):

<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">
— जिंदादिल प्यार
स्रोत
2

समाधान खोजने के लिए संघर्ष करने के बाद और आधिकारिक दस्तावेज को उपयोगी नहीं पाकर, इससे मेरे लिए समस्या हल हो गई:

  1. Fontawesome.zip डाउनलोड करें। मैं संस्करण 5.10.2 का उपयोग कर रहा हूं और मुझे यह https://fontawesome.com/download से प्राप्त हुआ है

  2. ज़िप फ़ाइल के अंदर कई फ़ोल्डर्स हैं। आपको केवल सीएसएस और वेबफोन्स फ़ोल्डर्स की आवश्यकता है यहां छवि विवरण दर्ज करें

    1. अपनी वेब परियोजनाओं में 2 फ़ोल्डर बनाएँ, और उन्हें सीएसएस और वेबफोन्स नाम दें। यहां छवि विवरण दर्ज करें

ये नाम अनिवार्य हैं। अब जिप से सीएसएस और वेबफोन्स की सामग्री को अपने प्रोजेक्ट में संबंधित फ़ोल्डरों में कॉपी करें। और बस यही!

सावधान रहें! Awesomeness उपयोगकर्ता के लिए चीजों को सरल बना रहा है!

— BabaNew
स्रोत
1

मैं ३.२.१ से ४.०.१ तक बदल गया हूं और फ़ोल्डर फ़ॉन्ट था और अब इसे फोंट कहा जाता है।

src: url ('../ font / fontawesome-webfont.eot; v = 3.2.1');

src: url ('../ फॉन्ट / फॉन्टवॉव-वेबफॉन्ट.ओट; वी = 4.0.1');

मुझे उम्मीद है कि यह किसी की मदद करेगा।

— आंद्रे डुटर्टे
स्रोत
1

मैं आधिकारिक फ़ॉन्ट विस्मयकारी SASS रूबी रत्न का उपयोग करता हूं और मेरे आवेदन के नीचे पंक्ति को जोड़कर त्रुटि को ठीक किया है

@import "font-awesome-sprockets";

स्पष्टीकरण:

फ़ॉन्ट-कमाल- sprockets फ़ाइल में फ़ॉन्ट फ़ाइल के लिए उचित पथ खोजने के लिए उपयोग किए जाने वाले sprockets assest सहायक सहायक कार्य शामिल हैं।

— Marklar
स्रोत
1

यदि आपके sass का उपयोग कर रहे हैं और अपने main.scss में आयात किया है @import '../vendor/font-awesome/scss/font-awesome.scss';

त्रुटि फ़ॉन्ट- awesome.scss फ़ाइल से आ सकती है, जो कि सापेक्ष पथ में फ़ॉन्ट फ़ाइलों की तलाश में है।

तो $ fa-font-path चर को ओवरराइड करना याद रखें : $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

जैसे कि आपके index.html में cdn को जोड़ने की कोई आवश्यकता नहीं है

— vilsbole
स्रोत
1

Fontawesome-all.css फ़ाइल को दोबारा जांचें - बहुत नीचे वेबफॉर्न्स फ़ोल्डर में एक पथ होगा। मेरा इसमें "../webfonts" प्रारूप था, जिसका अर्थ था कि सीएसएस फ़ाइल जहां है वहां से 1 स्तर ऊपर देख रही होगी। जैसा कि मेरी सभी सीएसएस फाइलें सीएसएस फ़ोल्डर में थीं और मैंने फोंट को एक ही फ़ोल्डर में जोड़ा, यह काम नहीं कर रहा था।

बस अपने फोंट फ़ोल्डर को एक स्तर तक ले जाएं और सब कुछ ठीक होना चाहिए :)

फ़ॉन्ट विस्मयकारी 5.0 के साथ परीक्षण किया गया

— रॉस
स्रोत
यह पसंदीदा उत्तर होना चाहिए क्योंकि यह पुराने दस्तावेज को लिंक किए बिना सीधे प्रश्न का उत्तर देता है। कुदोस
— काइल चैंपियन
1

मैं फ़ॉन्ट भयानक 5 यार्न के साथ डाउनलोड के साथ एक ही मुद्दा हो रही थी, मैं min.css फ़ाइल जोड़ी बना दिया साथ साथ all.js फ़ाइल के साथ।

उम्मीद है कि यह किसी को किसी की मदद करता है

<link  rel="stylesheet"   href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
<script src="node_modules/@fortawesome/fontawesome-free/js/all.js" charset="utf-8"></script>
— एनरिक मार्टिनेज़
स्रोत
1

/Css/all.css फ़ाइल में मुख्य स्टाइलिंग प्लस आइकन आइकन शामिल हैं, जिनकी आपको फ़ॉन्ट भयानक का उपयोग करते समय आवश्यकता होगी। / Webfonts फ़ोल्डर में सभी प्रकार की फ़ाइलें हैं जो ऊपर दिए गए CSS संदर्भों और निर्भर करता है।

संपूर्ण / webfonts फ़ोल्डर और /css/all.css को अपनी परियोजना की स्थैतिक संपत्ति निर्देशिका में कॉपी करें (या जहां आप कभी भी सामने की संपत्ति या विक्रेता सामान रखना पसंद करते हैं)।

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

बस भेंट - https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself आपको जवाब मिल जाएगा।

— दिपेश चौहान
स्रोत
0

रिश्तेदार रास्तों के बजाय पूर्ण का उपयोग करना मेरे लिए इसे हल कर दिया। मैं सापेक्ष रास्तों का उपयोग कर रहा था (नीचे पहला उदाहरण देखें) और यह काम नहीं किया। मैंने कंसोल के माध्यम से जांच की और पाया कि सर्वर 404 लौटा रहा था, फाइलें नहीं मिलीं।

404 के कारण सापेक्ष पथ: 

@font-face { 
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}

निरपेक्ष पथ ने इसे पार किया ब्राउज़र:

@font-face { 
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");
}

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

— टिम
स्रोत
0

यह मेरे लिए काम नहीं कर रहा था क्योंकि Allow from noneमेरे अपाचे विन्यास में रूट डायरेक्टरी के लिए मेरा निर्देशन था। यहाँ है कि मैं इसे काम करने के लिए कैसे मिला ...

मेरी निर्देशिका संरचना:

root/
root/font-awesome/4.4.0/css/font-awesome.min.css
root/font-awesome/4.4.0/fonts/fontawesome-webfont.*
root/dir1/index.html

जहाँ मेरा index.html है:

<link rel="stylesheet" href="../font-awesome/4.4.0/css/font-awesome.min.css">

मैंने अपनी रूट तक पहुंच को जारी रखना जारी रखा और इसके बजाय रूट / फ़ॉन्ट-भयानक / के लिए मेरे अपाचे कॉन्फिगर में एक और डायरेक्टरी एंट्री जोड़ी। 

<Directory "/path/root/font-awesome/">
    Allow from all
</Directory>
— user3325776
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.