ไอคอน FontAwesome ไม่แสดง ทำไม?

124

เมื่อเร็ว ๆ นี้ฉันได้พัฒนาเว็บไซต์นี้และฉันกำลังพยายามใส่ไอคอนแบบอักษรที่ยอดเยี่ยมลงไปดังนั้นจึงสามารถปรับขนาดได้

สิ่งนี้คือพวกเขาไม่ปรากฏตัว

ดู 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郝海东冠状病六四事件法轮功
1
โปรดลองรุ่นอื่นของแบบอักษรที่ยอดเยี่ยม ตัวอย่างเช่นไอคอนบางไอคอนไม่ปรากฏให้ฉันเห็นในเวอร์ชัน 4.3.0 แต่ปรากฏบน 4.7.0
— Almir Campos
กรุณาตรวจสอบstackoverflow.com/a/55977898/4874281 หวังว่ามันจะช่วยใครสักคน
— manian

คำตอบ:

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 คุณจะเชื่อมโยงกับ CSS แบบอักษรที่ยอดเยี่ยมโดยใช้ HTTPS หรือไม่ (แทนที่http://ด้วยhttps://ลิงก์ด้านบน)

  • ตรวจสอบอีกครั้งว่าคุณไม่ได้เปิดใช้งาน AdBlock Plus หรือ uBlock พวกเขาอาจบล็อกไอคอนบางอย่าง

  • รีเซ็ตแคชเบราว์เซอร์ของคุณ (บน Chrome ให้คลิกที่ปุ่มโหลดซ้ำและเลือก Hard Cache Reset)

  • ตรวจสอบให้แน่ใจว่าองค์ประกอบ<span>หรือที่<i>คุณใช้ใช้FontAwesomeตระกูลแบบอักษร ตัวอย่างเช่นจะต้องไม่เพียง

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

    แต่

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

    จะไม่ทำงานหากคุณมีสิ่งต่อไปนี้ใน CSS ของคุณ:

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

  • หากคุณใช้ IE8 คุณใช้ HTML5 Shim หรือไม่

  • หากไม่ได้ผลมีแนวคิดในการแก้ไขปัญหาเพิ่มเติมเกี่ยวกับ Font Awesome Wiki

— mxro
แหล่งที่มา
3
ฉันจะเพิ่ม: ตรวจสอบว่า. htaccess ของคุณไม่ได้ปิดกั้นส่วนขยาย ttf, svg, eot หรือ woff
— BassMHL
แบบอักษรแทนที่! มีคำตอบไม่มากนักที่พูดถึงเรื่องนี้ ฉันได้ตรวจสอบและตรวจสอบและตรวจสอบและในที่สุดก็พบ ฉันเคยพบปัญหานี้ในอดีตเช่นกันและไม่รู้ว่าทำไม แต่ตอนนี้ฉันรู้แล้ว
— adrianmc
1
ฉันพลาดที่จะเพิ่มซิงเกิ้ลfaเป็นชื่อชั้นก่อน ขอบคุณ คำตอบที่สมบูรณ์แบบสำหรับการค้นหาปัญหาทีละขั้นตอน
— Kai Noack
สำหรับฉันมันเป็นอย่างอื่นในการตั้งค่าแบบอักษร
— levininja
สำหรับฉันฉันมี "font-weight: 500" (เพื่อให้สอดคล้องกับธีมที่ฉันใช้) ฉันต้องตั้งค่าเป็น "font-weight: bold"
— bowlerae
24

ตอนแรกฉันไม่สามารถใช้งานกับFont Awesome 5 ได้ :

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

นั่นเป็นเหตุผลว่าทำไมฉันถึงมาที่นี่โดยไม่คุ้นเคยกับฟอนต์ที่น่ากลัว ดังนั้นเมื่อฉันดูเพิ่มเติมฉันสังเกตเห็นว่าปัญหาของฉันเป็นเพียงปัญหาเกี่ยวกับเวอร์ชันเท่านั้น

w3schoolsช่วยฉันในกรณีนี้

ใหม่ใน Font น่ากลัว 5 เป็นfasคำนำหน้าตัวอักษรที่น่ากลัว 4 faการใช้งาน

ดัชนี S ในfasยืนที่มั่นคงและไอคอนบางอย่างยังมี ปกติfarโหมดที่ระบุโดยใช้คำนำหน้า

ฉันสังเกตเห็นไฟล์ต่าง ๆ ในโฟลเดอร์ FontAwesome css แล้วเช่น:

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

และนั่นคือตอนที่ฉันตระหนักถึงความผิดพลาดของฉัน สิ่งที่ฉันต้องทำคือใส่ 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

ของฉันใช้งานไม่ได้เพราะฉันต้องการไอคอนที่ไม่ได้เปิดตัวในเวอร์ชัน FA ที่ฉันใช้อยู่

นี่เป็นคำตอบว่าทำไมไอคอนบางตัวจึงแสดง แต่บางไอคอนไม่

ค่อนข้างชัดเจน แต่ฉันเดาว่าบางคนยังคงตกหลุมรักสิ่งนี้ เหมือนฉัน.

— Taiguara Andrade
แหล่งที่มา
4
ใช่มันให้คำตอบสำหรับคำถาม
— Bobort
2
หรือคุณกำลังพยายามใช้แบบอักษรที่เก่ากว่าซึ่งไม่มีอยู่แล้วในเวอร์ชันที่คุณใช้อยู่ ตัวอย่างเช่นชื่อนี้เรียกว่า times-circle ไม่ใช่ times-circle-o ซึ่งเป็นชื่อเก่า: fontawesome.com/v4.7.0/icon/times-circle-o
— smoore4
1
ขอบคุณ!! ทำให้ผมดึงผมมาตลอดทั้งวัน
— 24x7
4

ฉันแก้ปัญหานี้โดยวางไดเร็กทอรี Fonts ไว้ที่ระดับเดียวกับไฟล์ CSS ของฉัน

— โลโล
แหล่งที่มา
3

ใครก็ตามที่อาจจะได้รับการตรวจสอบจากนี้ในปี 2018 ผมใช้ตัวอักษรที่น่ากลัว 4.7.0 และฉันได้ปัญหานี้แก้ไขได้โดยเพียงแค่การออกsในเท่าที่เห็นในรหัสfas นี้เดิม<i class="fa fa-[icon-name]"></i><i class="fas fa-[icon-name]"></i>

หวังว่านี่จะช่วยได้

— โชคดีราศีสิงห์
แหล่งที่มา
นอกจากนี้ฉันกำลังเรียกใช้เซิร์ฟเวอร์ node.js
— Goodluck Leo
ใหม่ใน Font Awesome 5 คือคำนำหน้าแบบฟาส Font Awesome 4 ใช้ฟะ จากw3schools
— Ruard van Elburg
3

หมายเหตุ

คำตอบนี้สร้างขึ้นเมื่อเวอร์ชันล่าสุดของfontawesomeคือv5 *แต่เวอร์ชันyarnและnpmชี้ไปที่v4 * (21.06.2019) กล่าวอีกนัยหนึ่งคือเวอร์ชันที่ติดตั้งผ่านตัวจัดการแพ็กเกจนั้นอยู่เบื้องหลังรุ่นล่าสุด!

หากคุณติดตั้งfont-awesomeผ่านตัวจัดการแพ็คเกจ ( เส้นด้ายหรือnpm ) โปรดทราบว่าติดตั้งเวอร์ชันใด หรือหากคุณติดตั้งไว้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/ คุณเลือกไอคอนฟรีและคุณค้นหาไอคอนลงชื่อเข้าใช้ (ดังตัวอย่าง) คุณคัดลอกไอคอนเช่น<i class="fas fa-sign-in-alt"></i>คุณวางลงใน html ของคุณและไอคอนไม่ปรากฏหรือแสดงเป็นสี่เหลี่ยมจัตุรัสหรือสี่เหลี่ยมผืนผ้า!

สารละลาย

โดยพื้นฐานแล้วเวอร์ชันที่ติดตั้งผ่านตัวจัดการแพ็กเกจจะอยู่เบื้องหลังเวอร์ชันที่แสดงบนเว็บไซต์https://fontawesome.com/ อย่างที่คุณเห็นว่าเราติดตั้งfont-awesome v4.7.0แต่เว็บไซต์แสดงเอกสารสำหรับfont-awesome v5.*. วิธีแก้ไขเยี่ยมชมเว็บไซต์ที่จัดทำไอคอนสำหรับv4.7.0 https://fontawesome.com/v4.7.0คัดลอกไอคอนที่เหมาะสมเช่น<i class="fa fa-sign-in" aria-hidden="true"></i>และรวมไว้ใน html ของคุณ

— Lukasz Dynowski
แหล่งที่มา
พวกเขาได้เปิดตัวแพ็คเกจใหม่ที่นี่ซึ่งมีเวอร์ชันล่าสุด มันเข้ากันได้กับ less และ sass \ o /
— DerpyNerd
2

เพียงเพิ่มข้อมูลเพิ่มเติมในคำตอบข้างต้นเกี่ยวกับการอัปเดตเกี่ยวกับ fontawesome

หากคุณใช้ฟอนต์น่ากลัว 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>ก่อนหน้า (YOUR_CLOSING_BODY)

ข และตัวอย่างเช่น

<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>
— Sundar Gsv
แหล่งที่มา
วิธีการให้บริการ css ในพื้นที่แทนที่จะเชื่อมโยงไปยังเว็บไซต์ FA?
— Ghilteras
นี่เป็นกรณีของฉัน ... ฉันไม่มีไฟล์ js ตอนนี้ใช้งานได้แล้ว!
— Cristian Sepulveda
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

หากคุณกำหนด CSS ที่กำหนดเองคุณต้องตั้งค่าfont-weight: 900;สำหรับไลบรารี Font Awesome ที่ใหม่กว่า (จากเวอร์ชัน 5) การไม่ตั้งค่าน้ำหนักแบบอักษรนี้อาจแสดงเป็นสี่เหลี่ยม

— jurev
แหล่งที่มา
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

ลองใช้ลิงก์สองลิงก์ด้านล่างในแท็กส่วนหัว

<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);
}
— Tran Anh Hien
แหล่งที่มา
1

ลิงค์ CDN ที่คุณโพสต์ฉันคิดว่าทำไมมันถึงไม่แสดงอย่างถูกต้องคุณสามารถใช้ลิงค์นี้ด้านล่างมันทำงานได้ดีสำหรับฉัน

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
ขยายข้อมูลโค้ด

— John Kesh Mahugu
แหล่งที่มา
0

ตรวจสอบให้แน่ใจว่าคุณได้รวม rel และพิมพ์เป็น "rel =" stylesheet "type = 'text / css'" ในลิงก์ไปยังไฟล์ Awesomefont css หากไม่มีสิ่งเหล่านี้ไฟล์ก็โหลดไม่ถูกต้องสำหรับฉัน

— เอลเลียตโรเบิร์ต
แหล่งที่มา
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>
— Waleed Hakim
แหล่งที่มา
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">
— Atif Tariq
แหล่งที่มา
-1

คุณต้องมีผู้นำเข้าแบบอักษร | ลอง

<style> 
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css););
</style>
— SIAMWEBSITE
แหล่งที่มา
-2

ฉันให้ฉันทำงานโดยแก้ไขไฟล์ font-awesome.css หลัก มันมี URL ไปยัง src (woff, eot, etc ... ) ฉันต้องเปลี่ยนเป็นพา ธ สัมบูรณ์เช่น: http://mywebsite.com/font-awesome.woff จากนั้นมันก็ใช้งานได้!

— crystallove18
แหล่งที่มา
2
ฉันไม่อยากแนะนำสิ่งนี้เนื่องจากคุณกำลังแก้ไขไฟล์ภายนอก คุณ (หรือทีมของคุณ) จะต้องจดจำสิ่งนี้ทุกครั้งที่ต้องอัปเดต fontawesome
— 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:เป็นต้น)

— Shahar
แหล่งที่มา
@ user3870894 จริงๆแล้วhrefฉันกำลังคิดถึงจาวาสคริปต์ แต่ลองรหัสใหม่
— Shahar
@ user3870894 o_o โพสต์ HTML แบบเต็มหรืออย่างน้อยก็ส่วนหลักจากนั้น คอนโซลพูดว่าอะไร? คุณลองตรวจสอบองค์ประกอบหรือไม่
— Shahar
2
@Shahar โดยการใช้//เบราว์เซอร์จะเลือกโปรโตคอลที่ไซต์ที่ร้องขอกำลังใช้ เมื่อไซต์ของคุณใช้ https มันจะเลือก https หากคุณใช้ http จะใช้ http เพื่อขอไฟล์จาก CDN แน่นอนว่าหากคุณเปิดไซต์ในพื้นที่โดยใช้file:///ซึ่งไม่แนะนำให้ใช้เบราว์เซอร์จะพยายามเปิด cdn ด้วยfileโปรโตคอล
— Robin van Baalen
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.