फ़ॉन्ट भयानक आइकन नहीं दिखा रहा है

99

मैं फ़ॉन्ट विस्मयकारी का उपयोग कर रहा हूं और सीएसएस को HTTP के साथ जोड़ना नहीं चाहता। मैंने Font Awesome को डाउनलोड किया और इसे अपने कोड में शामिल किया, फिर भी Font Awesome एक आइकॉन की जगह बॉर्डर वाला चौकोर बॉक्स दिखा रहा है। यहाँ मेरा कोड है:

<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
   <i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>

मैं जानना चाहूंगा कि बॉर्डर वाले चौकोर बॉक्स के बजाय आइकन डिस्प्ले कैसे बनाया जाए।

html css font-awesome

— गणेश एच
स्रोत

5

यह पहले भी कई बार पूछा जा चुका है। सुनिश्चित करें कि आप फ़ॉन्ट फ़ाइलों को भी शामिल कर रहे हैं .. न केवल CSS stackoverflow.com/questions/14366158/…

— Zim

यहाँ git github.com/FortAwesome/Font-Awesome/wiki/Troubles

— मेहावेल

कृपया अपनी फ़ोल्डर संरचना के साथ प्रश्न को अद्यतन करें जिसमें आपके पास फ़ॉन्ट-भयानक फ़ोल्डर है, इसलिए हम यह बता सकते हैं कि "फ़ॉन्ट-भयानक.min.css" सही ढंग से ttf पथ प्राप्त कर रहा है या नहीं। केवल css काम नहीं करेगा।

— अजीत होगड़े

stackoverflow.com/a/42355738/397872

— रिश्त

84

मेरे मामले में मैंने अपने सीएसएस कोड में निम्नलिखित गलती की है।

*{
    font-family: 'Open Sans', sans-serif !important;
}

यह पूरे पृष्ठ के लिए सभी फ़ॉन्ट परिवार नियमों को ओवरराइड करेगा। मेरा समाधान कोड को शरीर की तरह स्थानांतरित करना था।

body{
    font-family: 'Open Sans', sans-serif;
}

NB: जब भी आप का उपयोग करें !important सीएसएस में ध्वज का , तो उसी तत्व पर एक ही प्रकार के घोषित किसी अन्य सीएसएस नियम को ओवरराइड किया जाएगा।

— डैनियल बर्डे
स्रोत

4

मेरे लिए यही समाधान था। मेरे पास था *{font-family: Raleway}और मैंने इसे बदल दिया*.not(i) {font-family: Raleway}

— fungusanthrax

मुझे भी यह समस्या थी, लेकिन मैंने इसे उम्र के लिए महसूस नहीं किया क्योंकि DevTools में वास्तव में ऐसा लग रहा था कि FontAwesome का इस्तेमाल किया जा रहा है। अधिक जानकारी के लिए मेरा जवाब देखें।

— Dagmar

59

जब आप खोलते हैं font-awesome.min.cssतो आप निम्नलिखित पथ देख सकते हैं:

'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...

इसका मतलब है कि आप निर्देशिका बनाने होंगे Fontsऔर उसके बाद फ़ाइलों की प्रतिलिपि fontawesome-webfont.ttf( fontawesome-webfont.woff, fontawesome-webfont.eotइस फ़ोल्डर के लिए)। उसके बाद सब कुछ ठीक होना चाहिए।

— user2980426
स्रोत

चूंकि कम से कम 0.8.1 फ़ॉन्ट-भयानक संदर्भित नहीं है। तीन हैं summernoteएक्सटेंशन के साथ फ़ॉन्ट फ़ोल्डर में फ़ाइलें eot, ttfऔर woffजरूरत वितरित किया जाना है।

— ficuscr

2

सावधान रहें, 4.6.3 में (यदि पहले नहीं तो) ऐसा fontsनहीं है Fontsऔर एक ऐसे मामले में संवेदनशील प्रणाली है जो समस्याओं का कारण बनती है ...

— जेसन

1

फ़ॉन्ट भययोग्य इसे अपनी वेबसाइट पर क्यों नहीं कहते हैं? यह वास्तव में स्पष्ट नहीं है।

— मैट

बहुत बढ़िया! मैंने सोचा कि फोंट को सीएसएस के समान फ़ोल्डर में होना चाहिए, उन्हें एक फ़ोल्डर स्तर ऊपर होना चाहिए।

— जियोवानी वेरकूटरन

यह भी सुनिश्चित करें कि आपका पुस्तकालय अद्यतन है। बैंडकैंप लोगो को छोड़कर मेरे सभी लोगो थे। एक बार जब मैंने अपडेट किया गया 4.7 डाउनलोड किया और फाइलों को बदल दिया, तो यह काम कर गया।

— रयान वॉकर

45

विदित हो कि फॉन्ट के नए संस्करण (5) कमाल के उपयोग "fas"या उपसर्ग के "fab"बजाय "fa"।

उनकी वेबसाइट से उद्धृत:

संस्करण 5. में उपसर्ग को पदावनत किया गया है। नया डिफ़ॉल्ट ब्रांडों के लिए फ़ैस ठोस शैली और फैब शैली है।

यही कारण है कि मेरे फोंट खाली वर्ग दिखा रहे थे। अब तय हो गया।

उदाहरण कोड:

<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>

देखें: https://fontawesome.com/icons/facebook-f?style=brands

— krystonen
स्रोत

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

— ग्रूमेडोरिला

बस यही एक काम था। यदि आप एक आधुनिक संस्करण का उपयोग कर रहे हैं, तो इसका उपयोग करें।

— samurdhilbk

जीवन रक्षक! "फा-बार" में परिवर्तित हो गया है

— बुरा

धन्यवाद, मेरे लिए कुछ आइकन फैक के साथ और अन्य लोग फैब के साथ, उदाहरण के लिए फैब फ़े-ट्विटर ठीक है, लेकिन फ़ास-फ़ेस-ट्विटर एक सफेद वर्ग दिखाता है, आंकड़ा!

— user1620090

इसलिए यदि नया संस्करण फ़ैस है, तो मुझे अपनी कक्षाओं को 'फ़ैस' से 'एफए' में बदलने की आवश्यकता क्यों है

— सैम

22

पहले, जांचें कि आपके पास कक्षा = "एफए" है और साथ ही आइकन की कक्षा जो भी है। तो, बस नहीं

<i class="fa-pencil" title="Edit"></i>

लेकिन

<i class="fa fa-pencil" title="Edit"></i>

फिर यह उम्मीद के मुताबिक काम करता है। इससे मेरी समस्या हल हो गई।

— एक और प्रश्न
स्रोत

1

इसने मेरे लिए काम किया। मेरे लिए फैब एफ-लिफाफा काम नहीं कर रहा था, लेकिन तब एफए-लिफाफा काम कर रहा था। बहुत अजीब है लेकिन मेरी समस्या ठीक कर दी।

— जॉर्डन शूजेट

@JordanSchuetz "fab" ब्रांड आइकन के लिए विशिष्ट है, जैसे "fab fa-facebook-f"। नए संस्करणों में, आपको "ठोस" भिन्नता के लिए "फ़ैस" मिलेगा, इसलिए आपके पास नए संस्करणों में "फ़ैस-लिफाफा", या पुराने में "एफए-लिफाफा" तय हो जाएगा।

— टेसा

20

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

@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">

— एर्गा कांडली
स्रोत

11

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

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

इसके अलावा यदि आप इसका उपयोग करते हैं, तो आपके सर्वर पर अतिरिक्त फोंट अपलोड करने की कोई आवश्यकता नहीं होगी और आप सुनिश्चित होंगे कि आप सही CSSफ़ाइल की ओर इशारा करते हैं , और आप नवीनतम अपडेट से भी तुरंत लाभान्वित होंगे।

— वैलेन्टिन मर्सिएर
स्रोत

10

मैंने ऐसा ही किया और अभी भी केवल स्क्वायर बॉक्स है

— विपुल हदिया

5

मैं उसी समस्या से निपट रहा था तब मुझे लगा कि मुझे नए संस्करण (5 और प्लस) का उपयोग करना है

इस सीडीएन का उपयोग करें यह काम करेगा।

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">

— Halid
स्रोत

4

एक शुरुआत के लिए, आपके पास दोनों और नहीं होना चाहिएfont-awesome.css font-awesome.min.css

आम तौर पर, font-awesome.cssविकास के दौरान उपयोग करें , फिर font-awesome.min.cssसाइट पर खुश होने के बाद स्विच करें ।

इस तरह की समस्याएं अक्सर रिश्तेदार रास्तों और स्थानों के कारण होती हैं, इसलिए जांच लें कि आपकी html फ़ाइल सीएसएस के संबंध में कहां है।

यदि आपकी html फ़ाइल आधार निर्देशिका में है, और रूट से सबफ़ोल्डर में सीएसएस है, तो आपको इसकी आवश्यकता होगी: href="./css/font-awesome.css"(एकल अवधि)

— पॉल
स्रोत

4

हालांकि उपरोक्त सभी सही हैं, लेकिन मेरा मुद्दा यह था कि मैंने एफए 5 का मुफ्त संस्करण डाउनलोड किया है जिसमें नहीं है:

font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0')

मुझे काम करने के लिए v5 नहीं मिला इसलिए मैं ऊपर के पदों की मदद से 4.7.0 पर वापस लौट आया और इसने मेरा मुद्दा ठीक कर दिया।

— Mickers
स्रोत

1

मैं के रूप में अच्छी तरह से काम कर रहा FontAwesome के v5 + के साथ मुद्दे थे। ने अपने "वेबफोन्स" फ़ोल्डर को सीएसएस में "फोंट" में बदल दिया था, और इसे उसी तरह रखा, और यह ठीक से काम नहीं करता था। V4.7.0 के साथ फाइल की जगह और यह एक आकर्षण की तरह काम करता है। मानव संसाधन विकास मंत्री।

— लीसा सेरिली

1

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

— टेसा

4

मैं एक ही मुद्दे का सामना कर रहा था .. इसलिए फ़ॉन्ट भयानक डाउनलोड करने के बजाय, मैंने अपने HTML कोड में एक लिंक जोड़ा और यह काम कर गया।

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

स्निपेट का विस्तार करें

— रितिक वर्मा
स्रोत

बहुत-बहुत धन्यवाद, मैं इस फ़ॉन्ट को ठीक करने के लिए 24 घंटे खर्च करता हूं

— मैथ्यू मैगांटे

2

मैंने उनके CDN और जावास्क्रिप्ट का उपयोग करते हुए फ़ॉन्ट को सफलतापूर्वक स्थापित किया है (जैसा कि इस पृष्ठ पर वर्णित है )। फिर मैंने कुछ विरासत पृष्ठों पर HTML और CSS को कॉपी करने की कोशिश की और अचानक मैंने आइकनों के बजाय खाली वर्ग बक्से देखे।

मैंने डैनियल का उत्तर (ऊपर) देखा और क्योंकि मेरी विरासत सीएसएस फ़ाइल बहुत बड़ी (और साल पुरानी थी) मुझे संदेह था कि यह मुद्दा था। हालाँकि जब मैंने क्रोम DevTools में देखा तो यह वास्तव में ऐसा लग रहा था कि Font Awesome लोड हो गया है:

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

मेरी विरासत सीएसएस फ़ाइल एक गड़बड़ थी और मैंने इसे नहीं छूने को प्राथमिकता दी, इसलिए मैंने ऐसा करके धोखा दिया - कृपया किसी को न बताएं :)

<a class="nav-link fa fa-instagram" style="font-family:FontAwesome;" href="//www.instagram.com/xxxx/" target="_blank"></a>

यह भी ध्यान दें, जब मैंने फ़ॉन्ट विस्मयकारी संस्करण 4.7.0 से संस्करण 5.4.1 में अपग्रेड किया तो यह समस्या दूर हो गई! मैंने इस सेटअप गाइड और इस HTML का उपयोग किया है

<a class="nav-link" href="//www.instagram.com/xxxx/" target="_blank"><i class="fab fa-instagram"></i></a>

— Dagmar
स्रोत

2

SCSS और NPM पैकेज का उपयोग करने वालों के लिए, यहाँ मेरा समाधान है:

npm i --save @fortawesome/fontawesome-free

फिर एक SCSS फ़ाइल के शीर्ष पर (आदर्श रूप से आपके आवेदन की जड़ में एक SCSS फ़ाइल आयात की गई):

@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/all.css';

— जेफ डेडेरिक्स
स्रोत

दिलचस्प बात @fortawesome/fontawesome-free/css/all.cssयह तय है

— एंडी ब्रहम

1

मेरे मामले में: आपको अपने प्रोजेक्ट css फ़ोल्डर में पूरे फ़ॉन्ट-भयानक फ़ोल्डर को कॉपी करने की आवश्यकता है, न कि केवल फ़ॉन्ट-भयानक . min.csx फ़ाइल की।

— एसएसटी
स्रोत

1

तो यह जोड़ना style='font-weight:normal;'या अन्यथा तत्व पर सीधे फ़ॉन्ट को बदलना .fas{font-weight:900}फ़ॉन्ट विस्मयकारी सीएसएस फ़ाइल में परिभाषा को ओवरराइड करता है । मुझे लगता है कि फ़ॉन्ट फ़ॉन्ट फ़ाइल के भीतर विशिष्ट परिभाषित करता है जो इसके साथ काम करता है। ऐसा लगता है कि font-weight501 और 1000 के बीच सेट होना चाहिए, या फ़ॉन्ट एक वर्ग ब्लॉक की तरह लग सकता है।

— जेम्स विल्किंस
स्रोत

1

मेरा मुद्दा सबसे अधिक वोटों वाला था

*{
font-family: xxxxx
}

इसे बदलने से यह समस्या हल हो गई

body{
font-family: xxxx
}

— Jamsheer
स्रोत

0

आपने आइकन फ़ाइलों को सर्वर पर स्थानांतरित करने के लिए VCS (git या somesuch) का उपयोग किया होगा। गिट कहते हैं:

warning: CRLF will be replaced by LF in webroot/fonts/FontAwesome.otf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.eot.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.ttf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff2.
The file will have its original line endings in your working directory.

आपको शायद अपने फोंट ठीक करने होंगे।

— रिश्ता
स्रोत

0

मुझे लगता है कि आपने अपने रूट फ़ोल्डर में फ़ोल्डर को फोंट नहीं किया है, जैसे कि सीएसएस फ़ोल्डर जहां रहें।

डेमो

और css फोल्डर जैसा है

और फोंट फ़ोल्डर की तरह

मुझे उम्मीद है कि यह आपके लिए काम करेगा।

धन्यवाद।

— ओबैदुल हक़
स्रोत

0

MacOS Mojave पर, मुझे सफारी में यह समस्या थी। फ़ॉन्ट-भयानक छवियों ने क्रोम में काम किया, लेकिन सफारी में नहीं, इसलिए मुझे यकीन था कि यह साइट नहीं थी।

मैंने उन्हें सफारी मेनू में प्राथमिकताएं देकर, और गोपनीयता टैब के तहत "क्रॉस-साइट ट्रैकिंग को रोकें" को अक्षम / अनसुना कर दिया।

निश्चित नहीं कि इसने इसे क्यों तय किया, लेकिन यह किया

— माइकल शुलमैन
स्रोत

0

5.10.1 संस्करण पर आधारित है।

मेरा समाधान (स्थानीय रूप से):

यदि आप "fontawesome.css" या "fontawesome.min.css" का उपयोग कर रहे हैं, तो इसके बजाय "(css फ़ोल्डर में स्थित)" "all.css" का उपयोग करने का प्रयास करें।
"सीएसएस" फ़ोल्डर और फॉन्टव्यू पैकेज से "वेबफोन्स" फ़ोल्डर जो आपने डाउनलोड किया था, एक दूसरे के समान स्तर में होना चाहिए।

मेरे मामले में, मेरे पास पहले से ही एक सीएसएस फ़ोल्डर था, इसलिए मैंने केवल फ़ॉन्ट सीएसएस फ़ोल्डर का नाम बदलकर "सीएसएस-एफए" कर दिया।

मेरे सीएसएस फ़ोल्डर में "सीएसएस-एफए" और "वेबफोन्स" दोनों के साथ, बस इसे अपने पाठ संपादक में सही ढंग से लिंक करें और इसे काम करना चाहिए।

Ex: लिंक rel = "स्टाइलशीट" href = "css / css-fa / all.css"

— तौ तू यांग
स्रोत

0

से निशाना बनाया! importantized font-family चयनकर्ता बदल रहा है हल * { ... } करने के लिए *:not(i) { ... }

(एससीएस प्रीप्रोसेसर के साथ); आशा है कि यू हल

— backciro
स्रोत

0

नीचे दिया गया कोड फ़ॉन्ट-भयानक 4.70.0 है। फ़ॉन्ट-भयानक 5.11.2 पर जाने के लिए, यहां क्लिक करें ।

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

<i class="fa fa-camera-retro" aria-hidden="true"></i>

</html>

— PythonMaster202
स्रोत

0

मैं FontAwesome प्रो का उपयोग कर रहा हूं, और मेरे लिए समाधान all.min.cssइसके बजाय एम्बेड करना था fontawesome.min.css।

— ब्रूनो लेवेके
स्रोत

0

मैं फ़ॉन्ट भयानक प्रो 5.13 खुद को होस्ट करने के लिए इस ट्यूटोरियल का अनुसरण कर रहा था।

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

किसी कारण से मैं <link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet">लोड नहीं कर सका webfontsकि बदले में केवल वर्गों को दिखा रहा था। लेकिन जब मैंने इस्तेमाल किया तो <script defer src="%PUBLIC_URL%/font-awesome/all.min.js"></script>सब कुछ काम करने लगा। दोनों लिंक HTML में जोड़े गए थे <head>।

— Ogglas
स्रोत

इस js के साथ समस्या यह है कि फ़ाइल भारी लोड पर है

— 13

0

मैं स्काउट के साथ ड्रुपल 8 में 5.0.13 को जोड़ने की कोशिश कर रहा था। शैलियों को मुख्य दोष में डिफ़ॉल्ट रूप से शामिल नहीं किया गया है। एसएससी को उन्हें मैन्युअल रूप से जोड़ना था।

@import "libraries/fontawesome/fa-brands";
@import "libraries/fontawesome/fa-light";
@import "libraries/fontawesome/fa-regular";
@import "libraries/fontawesome/fa-solid";

— bonkisama
स्रोत

0

आपको फॉन्ट-कमाल की फाइल को css फोल्डर में बदलने और बदलने की जरूरत है

href = "../ css / font-awesome.css" को href = "css / font-awesome.s"

एक और बात आप इस फ़ॉन्ट-भयानक css फ़ाइल को प्रतिस्थापित कर सकते हैं और इसे आज़मा सकते हैं

.social-media{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.social-media li .fa{ 
  background: #fff;
  color: #262626;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align:center;
  line-height:50px; 
}

.social-media .fa:hover { 
  box-shadow: 5px 5px 5px #000; 
}

.social-media .fa.fa-twitter:hover{
  background:#55acee;
  color:#fff;
 
}

.social-media .fa.fa-facebook:hover{
  background:#3b5998;
  color:#fff;
}

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

<ul class="social-media">
  <li><i class="fa fa-twitter fa-2x"></i></li>
  <li><i class="fa fa-facebook fa-2x"></i></li>
 
</ul>

स्निपेट का विस्तार करें

— सानी
स्रोत

0

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

स्निपेट का विस्तार करें

— दे ज़िन हटंग
स्रोत

इसके साथ बहुत अच्छी तरह से काम करना

— डे ज़िन ह्तांग

-1

You needed to close your `<link />` 
As you can see in your <head></head> tag. This will solve your problem

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

— रोनाल्ड नामवान्जा
स्रोत

-1

बूटस्ट्रैप के लिए बाहर देखो! बूटस्ट्रैप .fa कक्षाओं को ओवरराइड करेगा। यदि आप दोनों पैकेजों को अलग-अलग सोचकर ला रहे हैं "मैं बूटस्ट्रैप को उत्तरदायी ब्लॉक हैंडलिंग और आइकन के लिए Font-Awesome" के लिए उपयोग करूंगा, तो आप बूटस्ट्रैप के अंदर .fa वर्गों को संबोधित करने के लिए ताकि वे Font-Awesome के स्टैंड के साथ हस्तक्षेप न करें- अकेले कार्यान्वयन।

उदाहरण के लिए: बूटस्ट्रैप में फ़ॉन्ट-परिवार 'FontAwesome' फ़ॉन्ट-पारिवारिक 'Font Awesome 5 Free' के साथ Font-Awesome में हस्तक्षेप करेगा और आपको इच्छित आइकन के बजाय एक सफेद बॉक्स मिलेगा।

इसे संभालने के क्लीनर तरीके हो सकते हैं, लेकिन यदि आप "व्हाइट बॉक्स" समस्या को ठीक करने की कोशिश कर रहे चेकलिस्ट से नीचे चले गए हैं और फिर भी यह पता नहीं लगा सकते हैं (जैसे मैंने किया था), तो यह वह उत्तर हो सकता है जो आप देख रहे हैं। के लिये।

— jtubre
स्रोत

वोट कम क्यों? यह एज-केस है, लेकिन यह एक कारण है जो आसानी से कहीं और नहीं मिलता है।

— 21

-1

मेरे मामले में, समस्या कुछ नियमित शैलियों ( far) का उपयोग करके हुई थी जो कि मुफ्त सेट में शामिल नहीं हैं। fasइसे बदलना तय है।

— यंगवे होइसेथ
स्रोत