Font Awesome ไม่แสดงไอคอน

Question 1

ฉันใช้ Font Awesome และไม่ต้องการเพิ่ม CSS ด้วย 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>

ฉันต้องการทราบวิธีทำให้ไอคอนแสดงแทนกล่องสี่เหลี่ยมที่มีขอบ

Question 2

ในกรณีของฉันฉันทำผิดต่อไปนี้ในรหัส css ของฉัน

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

การดำเนินการนี้จะลบล้างกฎตระกูลแบบอักษรทั้งหมดสำหรับทั้งหน้า วิธีแก้ปัญหาของฉันคือการย้ายรหัสไปที่ร่างกายเช่นนั้น

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

หมายเหตุ: เมื่อใดก็ตามที่คุณใช้!importantแฟล็กใน css กฎ css อื่น ๆ ที่ประกาศประเภทเดียวกันในองค์ประกอบเดียวกันจะถูกลบล้าง

Question 3

เมื่อคุณเปิดfont-awesome.min.cssคุณจะเห็นเส้นทางต่อไปนี้:

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

หมายความว่าคุณต้องสร้างไดเร็กทอรีFontsแล้วคัดลอกไฟล์fontawesome-webfont.ttf( fontawesome-webfont.woff, fontawesome-webfont.eot) ไปที่โฟลเดอร์นี้ หลังจากนั้นทุกอย่างควรทำงานได้ดี

Question 4

โปรดทราบว่าฟอนต์เวอร์ชันใหม่ (5) ใช้งานได้ดี"fas"หรือใช้"fab"แทน"fa"คำนำหน้า

อ้างจากเว็บไซต์ของพวกเขา:

คำนำหน้า fa เลิกใช้งานแล้วในเวอร์ชัน 5 ค่าเริ่มต้นใหม่คือ fas solid style และ fab style สำหรับแบรนด์ต่างๆ

นี่คือสาเหตุที่ฟอนต์ของฉันแสดงช่องสี่เหลี่ยมว่าง แก้ไขแล้ว

รหัสตัวอย่าง:

<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

Question 5

ขั้นแรกให้ตรวจสอบว่าคุณมี class = "fa" และคลาสของไอคอนคืออะไร ดังนั้นไม่ใช่แค่

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

แต่ยัง

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

จากนั้นก็ทำงานตามที่คาดไว้ สิ่งนี้ช่วยแก้ปัญหาของฉันได้

Question 6

เปิดรหัสของคุณแบบอักษรที่ยอดเยี่ยมเช่น:

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

Question 7

ตรวจสอบว่าเส้นทางไปยังCSSไฟล์ของคุณถูกต้อง แทนที่จะชอบลิงก์แบบสัมบูรณ์จะเข้าใจได้ง่ายกว่าเนื่องจากเรารู้ว่าเราเริ่มต้นจากจุดใดและเครื่องมือค้นหาก็จะชอบลิงก์เหล่านี้มากกว่าลิงก์แบบสัมพัทธ์ และเพื่อลดแบนด์วิดท์แทนที่จะใช้ลิงก์จากเซิร์ฟเวอร์แบบอักษรที่ยอดเยี่ยม:

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

ยิ่งไปกว่านั้นหากคุณใช้มันจะไม่จำเป็นต้องอัปโหลดแบบอักษรพิเศษไปยังเซิร์ฟเวอร์ของคุณและคุณจะต้องแน่ใจว่าคุณชี้ไปที่CSSไฟล์ที่ถูกต้องและคุณจะได้รับประโยชน์จากการอัปเดตล่าสุดทันที

Question 8

ฉันประสบปัญหาเดียวกัน .. ดังนั้นแทนที่จะดาวน์โหลดฟอนต์ที่ยอดเยี่ยมฉันเพิ่มลิงค์ในโค้ด 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>

ขยายข้อมูลโค้ด

Question 9

ฉันกำลังเผชิญกับปัญหาเดียวกันจากนั้นฉันก็พบว่าฉันต้องใช้เวอร์ชันใหม่ (5 และบวก)

ใช้ cdn นี้จะได้ผล

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

Question 10

ในการเริ่มต้นคุณไม่ควรมีทั้งสองอย่างfont-awesome.css และ font-awesome.min.css

โดยทั่วไปให้ใช้font-awesome.cssระหว่างการพัฒนาจากนั้นเปลี่ยนไปใช้font-awesome.min.cssเมื่อคุณพอใจกับไซต์แล้ว

ปัญหาเช่นนี้มักเกิดจากเส้นทางและตำแหน่งที่สัมพันธ์กันดังนั้นตรวจสอบว่าไฟล์ html ของคุณสัมพันธ์กับ css ที่ใด

หากไฟล์ html ของคุณอยู่ในไดเร็กทอรีฐานและ css ในโฟลเดอร์ย่อยปิดรูทคุณจะต้อง: href="./css/font-awesome.css"(จุดเดียว)

Question 11

ทั้งหมดข้างต้นถูกต้องอย่างไรก็ตามปัญหาของฉันคือฉันดาวน์โหลด FA5 เวอร์ชันฟรีซึ่งไม่มี:

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

ฉันไม่สามารถทำให้ v5 ทำงานได้ดังนั้นฉันจึงเปลี่ยนกลับเป็น 4.7.0 ด้วยความช่วยเหลือของโพสต์ด้านบนและมันช่วยแก้ปัญหา

Question 12

สำหรับผู้ที่ใช้ SCSS และแพ็คเกจ NPM นี่คือทางออกของฉัน:

npm i --save @fortawesome/fontawesome-free

จากนั้นที่ด้านบนของไฟล์ SCSS (โดยปกติแล้วไฟล์ SCSS จะนำเข้าที่รูทของแอปพลิเคชันของคุณ)

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

Question 13

ฉันติดตั้ง Font Awesome สำเร็จแล้วโดยใช้ CDN และ javascript include (ตามที่อธิบายไว้ในหน้านี้ ) จากนั้นฉันพยายามคัดลอก HTML และ CSS ไปยังหน้าเดิมบางหน้าและทันใดนั้นฉันก็เห็นกล่องสี่เหลี่ยมว่างเปล่าแทนที่จะเป็นไอคอน

ฉันเห็นคำตอบของ Daniel (ด้านบน) และเนื่องจากไฟล์ CSS ดั้งเดิมของฉันมีขนาดใหญ่ (และอายุหลายปี) ฉันจึงสงสัยว่านั่นเป็นปัญหา อย่างไรก็ตามเมื่อฉันดูใน Chrome DevTools ดูเหมือนว่า Font Awesome ถูกโหลดจริงๆ:

ฉันคาดว่าจะเห็นแบบอักษรขีดฆ่าหากมีปัญหา ... อย่างไรก็ตามฉันใช้ตัวเลือกทั้งหมดจนหมดแล้วดังนั้นฉันจึงตรวจสอบรูปแบบการคำนวณและเห็นชัดเจนว่าไม่มีการใช้ฟอนต์ Font Awesome อย่างแน่นอน (ดูแบบอักษรที่แสดงผลที่ด้านล่าง)

ไฟล์ CSS เดิมของฉันยุ่งและฉันไม่อยากแตะต้องมันดังนั้นฉันจึงโกงโดยการทำสิ่งนี้ - โปรดอย่าบอกใคร :)

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

โปรดทราบว่าเมื่อฉันอัปเกรดจาก Font Awesome เวอร์ชัน 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>

Question 14

ฉันใช้ FontAwesome Pro และวิธีแก้ปัญหาสำหรับฉันคือการฝังall.min.cssแทนfontawesome.min.css.

Question 15

ฉันคิดว่าคุณไม่มีโฟลเดอร์ฟอนต์ในโฟลเดอร์รูทของคุณเหมือนที่อยู่โฟลเดอร์ css

การสาธิต

และโฟลเดอร์ css ก็เหมือน

และโฟลเดอร์แบบอักษรเช่น

ฉันหวังว่ามันจะได้ผลสำหรับคุณ

ขอบคุณ.

Question 16

ในกรณีของฉัน: คุณจำเป็นต้องคัดลอกทั้งโฟลเดอร์ตัวอักษรที่น่ากลัวไปยังโฟลเดอร์โครงการ CSS ของคุณและไม่ได้เป็นเพียงตัวอักษร awesome.min.cssไฟล์

Question 17

ดังนั้นดูเหมือนว่าการเพิ่มstyle='font-weight:normal;'หรือเปลี่ยนแบบอักษรโดยตรงบนองค์ประกอบจะแทนที่.fas{font-weight:900}คำจำกัดความในไฟล์ CSS ของ Font Awesome ฉันเดาว่าแบบอักษรมีการกำหนดเฉพาะภายในไฟล์ฟอนต์ที่ใช้งานได้ ดูเหมือนว่าfont-weightจะต้องตั้งค่าระหว่าง 501 ถึง 1,000 หรือแบบอักษรอาจมีลักษณะเป็นบล็อกสี่เหลี่ยม

Question 18

ปัญหาของฉันคือปัญหาหนึ่งที่ได้รับการโหวตมากที่สุด

*{
font-family: xxxxx
}

การเปลี่ยนเป็นสิ่งนี้ช่วยแก้ปัญหาได้

body{
font-family: xxxx
}

Question 19

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

ขยายข้อมูลโค้ด

Question 20

คุณอาจใช้ VCS (git หรือ somesuch) เพื่อถ่ายโอนไฟล์ไอคอนไปยังเซิร์ฟเวอร์ git พูดว่า:

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.

คุณอาจต้องแก้ไขแบบอักษรของคุณ

Question 21

บน MacOS Mojave ฉันมีปัญหานี้ใน Safari ภาพแบบอักษรที่ยอดเยี่ยมใช้งานได้ใน Chrome แต่ไม่ใช่ใน Safari ดังนั้นฉันจึงแน่ใจว่าไม่ใช่ไซต์

ฉันให้พวกเขาแสดงผลโดยไปที่การตั้งค่าในเมนู Safari และปิด / ยกเลิกการเลือก "ป้องกันการติดตามข้ามไซต์" ในแท็บความเป็นส่วนตัว

ไม่แน่ใจว่าเหตุใดจึงแก้ไขได้ แต่ก็ทำได้

Question 22

ระวัง Bootstrap! Bootstrap จะแทนที่คลาส. fa หากคุณนำแพ็คเกจทั้งสองแยกกันโดยคิดว่า "ฉันจะใช้ Bootstrap สำหรับการจัดการบล็อกที่ตอบสนองและ Font-Awesome สำหรับไอคอน" คุณต้องจัดการกับคลาส. fa ใน Bootstrap เพื่อไม่ให้รบกวนการยืนของ Font-Awesome การใช้งานเพียงอย่างเดียว

เช่น: font-family 'FontAwesome' ใน Bootstrap จะรบกวนการทำงานของ Font-family 'Font Awesome 5 Free' ใน Font-Awesome และคุณจะได้กล่องสีขาวแทนไอคอนที่คุณต้องการ

อาจมีวิธีจัดการที่สะอาดกว่านี้ แต่ถ้าคุณได้ทำตามรายการตรวจสอบแล้วพยายามแก้ไขปัญหา "กล่องสีขาว" แต่ยังไม่สามารถเข้าใจได้ (เหมือนที่ฉันทำ) นี่อาจเป็นคำตอบที่คุณกำลังมองหา สำหรับ.

Question 23

อิงตามเวอร์ชัน 5.10.1

วิธีแก้ปัญหาของฉัน (ในเครื่อง):

หากคุณใช้ "fontawesome.css" หรือ "fontawesome.min.css" ให้ลองใช้ "all.css" แทน (อยู่ในโฟลเดอร์ css)
โฟลเดอร์ "css" และโฟลเดอร์ "webfonts" จากแพ็คเกจ fontawesome ที่คุณดาวน์โหลดจะต้องอยู่ในระดับเดียวกัน

ในกรณีของฉันฉันมีโฟลเดอร์ css อยู่แล้วดังนั้นฉันจึงเปลี่ยนชื่อโฟลเดอร์ fontawesome css เป็น "css-fa"

ด้วยทั้ง "css-fa" และ "webfonts" ในโฟลเดอร์ css ของฉันเพียงแค่เชื่อมโยงให้ถูกต้องในโปรแกรมแก้ไขข้อความของคุณก็จะใช้งานได้

เช่น link rel = "stylesheet" href = "css / css-fa / all.css"

Question 24

แก้ไขการเปลี่ยน targetted! importantized font-family selector จาก * { ... } เป็น *:not(i) { ... }

(ด้วยตัวประมวลผลก่อน scss); หวังว่าคุณจะแก้ไขได้

Question 25

ในกรณีของฉันปัญหาเกิดจากการใช้สไตล์ปกติ ( far) ที่ไม่รวมอยู่ในชุดฟรี การเปลี่ยนเพื่อfasแก้ไข

Question 26

โค้ดด้านล่างนี้เป็นแบบอักษร 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>

Question 27

ฉันทำตามบทช่วยสอนนี้เพื่อโฮสต์ Font Awesome Pro 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>ทุกอย่างก็เริ่มทำงาน การเชื่อมโยงทั้งสองถูกเพิ่มใน <head>HTML

Question 28

ฉันพยายามเพิ่ม fa 5.0.13 ใน drupal 8 ด้วย scss รูปแบบจะไม่รวมอยู่โดยค่าเริ่มต้นใน fa.scss หลักต้องเพิ่มด้วยตนเอง

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

Question 29

คุณต้องใส่ไฟล์ font-awesome ในโฟลเดอร์ css แล้วเปลี่ยน

href = "../ css / font-awesome.css" ถึง href = "css / font-awesome.css"

อีกอย่างหนึ่งคุณสามารถแทนที่ไฟล์ 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>

ขยายข้อมูลโค้ด

Question 30

เป็นสิ่งที่เกี่ยวข้องกับ v5 ไอคอนบางตัวใช้ไม่ได้กับเวอร์ชันเก่า

ลิงค์นี้ใช้ได้กับฉัน!

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

Question 31

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>