123

हाल ही में मैं इस वेबसाइट को विकसित कर रहा हूं और मैं इसमें एक फ़ॉन्ट भयानक आइकन डालने की कोशिश कर रहा हूं, इसलिए यह स्केलेबल है।

बात यह है कि वे दिखाई नहीं दे रहे हैं।

HTML को देखें:

<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>

या

<li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>

मैंने स्टाइलशीट संदर्भ को सिर में रखा।

मुझे नहीं पता कि वे क्यों नहीं दिखा रहे हैं।

यहाँ संदर्भ है:

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

ठीक है, यहाँ पूर्ण HTML है:

<head>
    <meta charset="UTF-8">
    <title>Retrica</title>
    <link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

    <link href="style/normalize.css" rel="stylesheet" type="text/css">
    <link href="style/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="style/main.css" rel="stylesheet" type="text/css">
</head>

<body>
    <header class="top-header">
        <div class="container"><!-- Start Container -->
            <div class="row"><!-- Start Row -->
                <div class="span3"><!-- Start Span3 -->
                    <div class="logo"><img src="img/Retrica.@2x.png" alt="" width="67px" height="13,5px"></div>
                </div><!-- End Span3 -->
                <div class="span9"><!-- Start Span9 -->
                    <nav class="main-nav">  <!-- Start Nav -->

                        <a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>
                        <ul class="nav-ul"> <!-- Start Unordered List -->
                            <li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>
                            <li><a href="#"><span class="fa fa-mobile-phone fa-2x"></span> Contact Us</a></li>

                        </ul> <!-- End Unordered List -->
                    </nav><!-- End Nav -->
                </div><!-- End Span9 -->
            </div><!-- End Row -->
        </div><!-- End Container -->
    </header>

    <section>

        <a href="#" class="btncta">Register Now</a>
    </section>

</body>

html css font-awesome

— लुइस वाल्डेज़
स्रोत

1

मेरे लिए ठीक काम करता है: jsfiddle.net/ZF7x4

— Shahar

संबंधित stackoverflow.com/questions/14366158/…

— Ciro Santilli 郝海东 qu qu qu 六四六四

1

कृपया फ़ॉन्ट-भयानक का एक और संस्करण आज़माएं। उदाहरण के लिए, कुछ आइकन मेरे लिए संस्करण 4.3.0 पर दिखाई नहीं दे रहे थे, लेकिन वे 4.7.0 पर दिखाई दिए।

— आलमीर कैंपोस

कृपया stackoverflow.com/a/55977898/4874281 की जाँच करें । आशा है कि यह किसी की मदद करता है

— मियां

105

आपके संदर्भ में, आपके पास यह है:

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

विशेष रूप से, href=भाग।

हालाँकि, आपके पूर्ण HTML के अंतर्गत यह है:

<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

आप की जगह की कोशिश की है src=के साथ href=अपना पूरा html में यह बनने के लिए?

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

मेरे लिए काम करता है: http://codepen.io/TheNathanG/pen/xbyFg

— NathanG
स्रोत

10

नोट : कुछ बार आपको खाली बॉक्स दिखाई दे सकते हैं, फिर डबल चेक करें कि आपके पास एक ही फ़ोल्डर में css और फोंट फाइल है , इसे चेक करें , आशा है कि किसी की मदद करें।

— shaijut

104

अनुपलब्ध फ़ॉन्ट-भयानक आइकन के चाहने वालों के लिए, मैंने कुछ विचार एकत्र किए हैं:

सुनिश्चित करें कि आप CDN के लिए एक सही लिंक का उपयोग करते हैं, जैसे:
```
<link 
 href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
 rel="stylesheet" type='text/css'>
```
अपने पृष्ठ के लिए HTTPS का उपयोग करता है, तो आप HTTPS का उपयोग करके (की जगह font-भयानक सीएसएस से लिंक करना http://साथ https://ऊपर के लिंक में)।
दोहराएं कि आपके पास AdBlock Plus या uBlock सक्षम नहीं है। वे कुछ आइकनों को अवरुद्ध कर सकते हैं।
अपने ब्राउज़र कैश रीसेट करें। (क्रोम पर पुनः लोड बटन पर क्लिक करें और हार्ड कैश रीसेट का चयन करें)
आश्वासन दें कि जो तत्व या तत्व आप उपयोग करते हैं, वह FontAwesomeफ़ॉन्ट परिवार का उपयोग करता है । उदाहरण के लिए, यह सिर्फ नहीं होना चाहिए
```

```
परंतु
```

```
यदि आपके पास अपने CSS में निम्नलिखित कुछ है तो यह काम नहीं करेगा:
```
* {
 font-family: 'Josefin Sans', sans-serif !important; 
}
```
यदि आप IE8 का उपयोग कर रहे हैं, तो क्या आप HTML5 शिम का उपयोग कर रहे हैं?
यदि यह काम नहीं करता है, तो फ़ॉन्ट विस्मयकारी विकी पर आगे समस्या निवारण विचार हैं ।

— mxro
स्रोत

3

मैं जोड़ूंगा: अपने .htaccess को ttf, svg, eot, या woff एक्सटेंशन को ब्लॉक नहीं कर रहा है

— BassMHL

फ़ॉन्ट ओवरराइड करता है! एक नहीं कई जवाबों में यह उल्लेख है। मैंने जाँच की है और जाँच की है और जाँच की और अंत में इसका पता लगा लिया है। मैंने अतीत में भी इस समस्या का सामना किया है, और पता नहीं क्यों, लेकिन अब मुझे पता है।

— एड्रिनमैक

1

मैं faपहले वर्ग के नाम के रूप में एकल को जोड़ने से चूक गया । धन्यवाद। कदम से कदम समस्या खोजने के लिए सही जवाब।

— काई नैक

मेरे लिए यह फॉन्ट-परिवार की स्थापना के लिए कुछ और था

— लेविनिन्जा

मेरे लिए मेरे पास "फॉन्ट-वेट: 500" था (इसे थीम के अनुरूप बनाने के लिए जो मैं उपयोग कर रहा था)। मुझे इसे "फॉन्ट-वेट: बोल्ड" के लिए सेट करना था

— कटोरा 6

24

पहले तो मैं फ़ॉन्ट विस्मयकारी 5 के साथ काम करने के लिए इसे प्राप्त नहीं कर सका :

<i class="fa fa-sort-down"></i>

यही कारण है कि मैं यहाँ आया था, फ़ॉन्ट भय से अपरिचित होना। इसलिए जब मैंने आगे देखा तो मैंने देखा कि मेरा मुद्दा केवल संस्करण के साथ एक मुद्दा था।

w3schools ने इस मामले में मेरी मदद की।

फ़ॉन्ट विस्मयकारी 5 में नया fasउपसर्ग है, फ़ॉन्ट विस्मयकारी 4 का उपयोग करता है fa।

एस ठोसfas के लिए खड़ा है , और कुछ आइकन में एक नियमित मोड भी है , जो उपसर्ग का उपयोग करके निर्दिष्ट है far।

मैंने पहले से ही FontAwesome सीएसएस फ़ोल्डर में विभिन्न फाइलों को देखा, जैसे:

all.min.css
brands.min.css
fontawesome.min.css
regular.min.css
solid.min.css

और तभी मुझे अपनी गलती का एहसास हुआ। मुझे बस इतना करना था कि HTML में उपयुक्त सीएसएस को शामिल किया जाए:

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/regular.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/solid.min.css">

और फिर सही आइटम देखें:

<i class="fas fa-sort-down"></i>

यह सेटअप मेरे लिए काम करता है। हालांकि सभी वस्तुओं में प्रत्येक प्रकार में समतुल्य नहीं है। यह काम नहीं करेगा:

<i class="far fa-sort-down"></i>

एक साइड नोट के रूप में, जब आप सभी अलग फ़ाइलों को संदर्भित नहीं करना चाहते हैं तो यह पर्याप्त होगा:

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">

— Ruard van Elburg
स्रोत

इसके अलावा, चीटशीट से पता चलता है कि प्रत्येक आइकन प्रकार के लिए कौन से आइटम उपलब्ध हैं।

— Ruard van Elburg

12

मेरा काम नहीं कर रहा था क्योंकि मुझे एक आइकन चाहिए था जो एफए संस्करण में जारी नहीं किया गया था जिसका मैं उपयोग कर रहा था।

यह जवाब देता है कि कुछ आइकन क्यों दिखाते हैं लेकिन अन्य नहीं।

बहुत स्पष्ट है, लेकिन मुझे लगता है कि कुछ लोग अभी भी इसके लिए आते हैं। मेरे जैसा।

— तैगुअरा एंड्रेड
स्रोत

4

हां, यह प्रश्न का उत्तर प्रदान करता है।

— बोबोर्ट

2

या आप एक पुराने फ़ॉन्ट का उपयोग करने का प्रयास कर रहे हैं जो अब आपके द्वारा उपयोग किए जा रहे संस्करण में मौजूद नहीं है। यह एक, उदाहरण के लिए, केवल टाइम-सर्कल नहीं बार-सर्कल-ओ कहा जाता है जो पुराना नाम है: fontawesome.com/v4.7.0/icon/times-circle-o

— smoore4

1

धन्यवाद!! यह मुझे पूरे दिन अपने बाल खींच रहा है

— 24x7

5

आपको maxcdn.bootstrapcdn.com के लिए https का उपयोग करना चाहिए। अधिकतम एलसीडी पर केवल https कोर

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

— चचावन वोंग्सिपिरसर्ट
स्रोत

4

मैंने अपनी सीएसएस फ़ाइलों के समान स्तर पर फ़ॉन्ट निर्देशिका डालकर इस समस्या को हल किया।

— लोलो
स्रोत

3

जो कोई भी 2018 में इसे देख सकता है। मैं फॉन्ट भयानक 4.7.0 का उपयोग कर रहा हूं और मुझे यह मुद्दा हल करने में आसानी sहुई fasजैसा कि कोड में देखा गया है । यह मूल रूप से था ।

उम्मीद है की यह मदद करेगा।

— गुडलक लियो
स्रोत

साथ ही मैं नोड.जेएस सर्वर चला रहा हूं।

— गुडलक लियो

फ़ॉन्ट विस्मयकारी 5 में नया fas उपसर्ग है, फ़ॉन्ट विस्मयकारी 4 में fa का उपयोग करता है। से w3schools

— Ruard वैन Elburg

2

फॉन्टव्यू पर अपडेट के संबंध में उपरोक्त उत्तर में कुछ और जानकारी जोड़ते हुए,

यदि आप फ़ॉन्ट भयानक 5 का उपयोग करते हैं,

ए। बस HTML से नीचे कॉपी-पेस्ट करें,

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

नोट: अपनी सभी लिपियों को <body> {YOUR_SCRIPT_HERE}</body>(और__OSOS_B_BY से ठीक पहले) शामिल करने के लिए बेहतर है

ख। और उदाहरण के लिए,

<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>

— सुंदर Gsv
स्रोत

कैसे वेबसाइट के लिए जोड़ने के बजाय स्थानीय रूप से सीएसएस की सेवा के बारे में?

— घिल्टारस

यह मेरा मामला था ... मैं js फ़ाइल नहीं है, अब यह काम करता है!

— क्रिस्टियान सेपुलवेडा

2

मेरे लिए इस काम को जोड़ना:

<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">

जरा देखो तो

तो पूरा उदाहरण है:

<link href="https://github.com/FortAwesome/Font-Awesome/blob/master/web-fonts-with-css/css/fontawesome.css" rel="stylesheet">
<a class="btn-cta-freequote" href="#">Compute <i class="fa fa-calculator"></i></a>

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

— edgarmtze
स्रोत

2

यदि आप कस्टम सीएसएस को परिभाषित करते हैं तो आपको font-weight: 900;कुछ नए फ़ॉन्ट विस्मयकारी लाइब्रेरी (संस्करण 5 से) के लिए सेट करना होगा । इस फ़ॉन्ट-भार को सेट न करने पर यह वर्ग दिखा सकता है।

— jurev
स्रोत

2

यह उत्तर तब बनता है जब फॉन्टव्यू का नवीनतम संस्करण v5 है। * लेकिन यार्न और एनपीएम संस्करण v4 पर इंगित करता है । * (21.06.2019)। दूसरे शब्दों में, पैकेज प्रबंधकों के माध्यम से स्थापित संस्करण नवीनतम रिलीज के पीछे हैं!

यदि आपने font-awesomeपैकेज मैनेजर ( यार्न या एनपीएम ) के माध्यम से स्थापित किया है , तो कृपया ध्यान रखें कि कौन सा संस्करण स्थापित किया गया था। वैकल्पिक रूप से, यदि आपने पहले ही font-awesomeबहुत समय पहले स्थापित किया है , तो जांचें कि कौन सा संस्करण स्थापित किया गया था।

नए निर्भरता के रूप में फ़ॉन्ट-भयानक स्थापित करना:

$ yarn add font-awesome
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ font-awesome@4.7.0
info All dependencies
└─ font-awesome@4.7.0
Done in 3.32s.

फ़ॉन्ट-भयानक का कौन सा संस्करण पहले से स्थापित है, इसकी जाँच:

$ yarn list font-awesome
yarn list v1.16.0
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ font-awesome@4.7.0
Done in 0.79s.

संकट

के बाद आप स्थापित font-awesomeनिर्भरता, आप इन दो स्रोत फ़ाइलों में से एक को शामिल font-awesome.cssया font-awesome.min.css(में स्थापित किया गया node_modules/font-awesome/css/में) शीर्ष लेख को अपने वेबपेज जैसे की

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

इसके बाद, आप https://fontawesome.com/ पर जाएं । आप मुफ्त आइकन चुनते हैं और आप साइन-इन आइकन (उदाहरण के रूप में) की खोज करते हैं। आप आइकन को कॉपी करते हैं जैसे , आप इसे अपने html में पेस्ट करते हैं और, आइकन को नहीं दिखाया जाता है, या वर्ग या आयत के रूप में प्रदर्शित किया जाता है!

उपाय

संक्षेप में, पैकेज प्रबंधकों के माध्यम से स्थापित संस्करण उस संस्करण के पीछे हैं जो https://fontawesome.com/ वेबसाइट पर दिखाया गया है। जैसा कि आप देख सकते हैं कि हम स्थापित हैं font-awesome v4.7.0, लेकिन वेबसाइट के लिए प्रलेखन दिखाता है font-awesome v5.*। समाधान, उस वेबसाइट पर v4.7.0 जाएं , जो दस्तावेज़ों के लिए प्रतीक है https://fontawesome.com/v4.7.0 , उपयुक्त आइकन जैसे कॉपी करें और इसे अपने HTML में शामिल करें।

— लुकाज़ डायनोव्स्की
स्रोत

वे एक नए पैकेज जारी किया है यहाँ नवीनतम संस्करण है। यह

— DerpyNerd

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

Fontawesome.css फ़ाइल में फ़ॉन्ट संदर्भ शामिल नहीं है।

— जिंदादिल प्यार
स्रोत

1

यदि आप ब्लॉगर होस्टिंग का उपयोग कर रहे हैं, तो इस url स्टाइलशीट css का उपयोग करें:

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

— नूरुद्दीन बी.एम.
स्रोत

1

नीचे दिए गए दो लिंक हेडर टैग में रखें।

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

नीचे दिए गए लिंक से प्रतीक प्राप्त करना:

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/3.2.1/assets/font-awesome/css/font-awesome.css">

— चेरी
स्रोत

1

मैं उपयोग करता हूं:

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<a class="icon fa-car" aria-hidden="true" style="color:white;" href="http://viettelquangbinh.com"></a>

और शैली के बाद:

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

— त्रान अनह हीन
स्रोत

1

सीडीएन लिंक जिसे आपने पोस्ट किया था मान लीजिए कि यह सही ढंग से क्यों नहीं दिखा रहा है, आप इसे नीचे इस्तेमाल कर सकते हैं, यह मेरे लिए पूरी तरह से काम करता है।

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

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

— जॉन केश महुगु
स्रोत

1

मैं all.min.css फ़ाइल का उपयोग करके काम करने के लिए फ़ॉन्ट विस्मयकारी प्राप्त करने में सक्षम था।

— रोब ब्रेइडर
स्रोत

0

सुनिश्चित करें कि आप rel और "rel =" स्टाइलशीट "प्रकार = 'पाठ / सीएसएस' के रूप में भयानक भयानक सीएसएस फ़ाइल के लिंक में शामिल हैं। इन के बिना फ़ाइल मेरे लिए सही ढंग से लोड नहीं हो रही थी।

— इलियट रॉबर्ट
स्रोत

0

आप इसे .htaccess फ़ाइल को भयानक फ़ॉन्ट की निर्देशिका में जोड़ सकते हैं

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/woff .woff
AddType font/woff .woff2
AddType font/otf .svg

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

— वलीद हकीम
स्रोत

0

मैंने परीक्षण किया है और यह काम कर रहा है।

इसके अलावा

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

HTTPS के साथ इसका उपयोग करें

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

— आतिफ तारिक़
स्रोत

-1

आपको एक फ़ॉन्ट आयातक की आवश्यकता है | प्रयत्न

<style> 
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css););
</style>

— SIAMWEBSITE
स्रोत

-2

मुझे मुख्य फॉन्ट-भयानक.css फ़ाइल को संपादित करके काम करने के लिए मिला। यह src (woff, eot, आदि ...) के लिए urls है। मुझे उन्हें पूर्ण पथ में बदलना पड़ा जैसे: http://mywebsite.com/font-awesome.woff तब इसने काम किया!

— crystallove18
स्रोत

2

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

— J Cordero

-6

इसे बदलो:

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

इसके लिए:

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

मेरा मानना है कि आपको इसकी आवश्यकता है http:अन्यथा यह नहीं पता है कि किस प्रोटोकॉल का उपयोग करना है (और file:उदाहरण के लिए गलत एक का उपयोग करता है )।

— शहर
स्रोत

@ user3870894 वास्तव में यह है href, मैं जावास्क्रिप्ट के बारे में सोच रहा था। लेकिन नए कोड का प्रयास करें।

— शाहर

@ user3870894 o_o तब पूर्ण HTML या कम से कम मुख्य भागों को पोस्ट करें। कंसोल क्या कहता है? क्या आपने तत्व का निरीक्षण करने की कोशिश की?

— शाहर

2

@Shahar //ब्राउज़र का उपयोग करके उस प्रोटोकॉल को चुनता है जिसका अनुरोध साइट उपयोग कर रही है। जब आपकी साइट https का उपयोग कर रही है, तो यह https को चुनता है। यदि आप http का उपयोग कर रहे हैं, तो यह CDN से फ़ाइल का अनुरोध करने के लिए http का उपयोग करता है। बेशक, यदि आप साइट का उपयोग करके स्थानीय रूप से खोलते हैं file:///, जो अनुशंसित नहीं है, तो ब्राउज़र वास्तव में fileप्रोटोकॉल के साथ सीडीएन को खोलने की कोशिश करेगा ।

— रॉबिन वैन बालन

FontAwesome आइकन नहीं दिखा रहा है। क्यों?

टिप्पणियाँ

संकट

उपाय