แบบอักษรดีเลิศไม่ทำงานไอคอนแสดงเป็นสี่เหลี่ยม

224

ดังนั้นฉันจึงพยายามสร้างต้นแบบหน้าการตลาดและฉันใช้ Bootstrap และไฟล์ Font Awesome ใหม่ ปัญหาคือเมื่อฉันพยายามใช้ไอคอนทุกอย่างที่แสดงบนหน้าจะเป็นสี่เหลี่ยมจัตุรัสขนาดใหญ่

นี่คือวิธีที่ฉันรวมไฟล์ไว้ในหัว:

<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
คุณกำลังนำเข้าแบบอักษรหรือไม่
— mayhewr
1
อาจจะไม่. ฉันคิดว่าคุณต้องรวม.cssไฟล์เท่านั้น
— Connor Black
2
ชื่อแสดงถึงปัญหาที่เกิดขึ้นเฉพาะกับ Chrome มันโหลดในเบราว์เซอร์อื่นหรือไฟล์ฟอนต์ที่อ้างถึงเปิดเป็น 404 หรือไม่
— cimmanon
1
ไม่พบขั้นตอนที่ 3 บนลิงก์ด้านบน ณ เดือนสิงหาคม 2016 ... การเปลี่ยนเส้นทางใด ๆ ??
— Saurabh Tiwari
1
คุณอาจลืมคัดลอกโฟลเดอร์ webfont หรือไม่
— entithat

คำตอบ:

149

ตามเอกสารประกอบ (ขั้นตอนที่ 3) คุณจะต้องแก้ไขไฟล์ CSS ที่ให้มาเพื่อชี้ไปยังตำแหน่งแบบอักษรบนไซต์ของคุณ

— mayhewr
แหล่งที่มา
5
คำตอบที่ดีเพียงให้ข้อมูลเพิ่มเติมคุณสามารถวางแบบอักษรในเส้นทางเริ่มต้นที่ css เปิด Font-awesome.css และคุณจะพบรายการต่อไปนี้: @ font-face {font-family: 'FontAwesome'; src: url ('../ font / fontawesome-webfont.eot? v = 3.2.1'); src: url ('../ font / fontawesome-webfont.eot? # iefix & v = 3.2.1')
— Braulio
1
สำหรับผู้อ่าน ASP.NET MVC ในอนาคตที่มีปัญหาเดียวกัน: หากคุณมีโฟลเดอร์ทั้งหมดในตำแหน่งที่ถูกต้องให้ตรวจสอบว่าคุณได้เพิ่มประเภท MIME ในไฟล์ web.config ตามที่ชี้ไปที่นี่: stackoverflow.com/questions/4015816/
— jpgrassi
1
หากคุณใช้ Data URI Scheme พร้อมกับฟอนต์เวอร์ชัน base64 (สามารถแปลงออนไลน์ได้อย่างง่ายดาย) ดังนั้นคุณไม่ต้องกังวลเกี่ยวกับพา ธ ไฟล์และการโฮสต์ทรัพยากรที่เหมาะสม
— RenaissanceProgrammer
หมายเหตุ : หากคุณไม่ต้องการที่จะปรับเปลี่ยน CSS เพียงใส่ CSS และแบบอักษรในโฟลเดอร์เดียวกันตรวจสอบนี้
— shaijut
7
@tutuca: ทุกคนไม่สามารถใช้ CDN
— การแข่งขัน Lightness ใน Orbit
188

คุณต้องมี 2 ชั้นเรียนที่faชั้นและชั้นที่ระบุไอคอนที่ต้องการfa-twitter, fa-searchฯลฯ ...

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

<!-- Correct -->
<i class="fa fa-search"></i>
— นาบิลคาดิมิ
แหล่งที่มา
4
นี่ควรเป็นคำตอบที่ดีที่สุด CSS ให้คะแนนไปยังตำแหน่งที่ถูกต้องสำหรับไฟล์ฟอนต์ตราบใดที่คุณไม่ย้ายมัน - นี่ทำให้ฉันขึ้นกำแพงขอบคุณ
— alex3410
5
หมายเหตุ: "คำนำหน้า fa ได้รับการคัดค้านในเวอร์ชัน 5 ค่าเริ่มต้นใหม่คือรูปแบบของแข็งและรูปแบบ fab สำหรับแบรนด์"
— Terje Solem
1
นี้แก้ไขให้ฉัน! ฉันใช้ Angular (5 ฉันคิดว่า) พร้อมกับ primeng และดูเหมือนว่าตัวอักษรที่ยอดเยี่ยมนั้นใช้ได้กับเมนูเช่นคำจำกัดความใน xx.component.ts (ไอคอนแสดงผลถูกต้อง) อย่างไรก็ตาม: เมื่อมีการเพิ่มสิ่งที่จะ xx.component.html (เช่น P-ปุ่มที่มีไอคอน) หนึ่งมีการเพิ่มเอฟเอคัระดับและ fa- <สิ่งที่ไอคอน>!
— อิกอ
1
@TerjeSolem ข้อมูลที่คุณให้มีความสำคัญมาก มันแก้ไขปัญหาของฉัน อย่างที่ฉันใช้รุ่นเก่า แต่ใช้ขอบคุณ "fas"
— MindRoasterMir
🤦‍♂️ ขอบคุณมาก! ฉันได้เหมือนกันกับไอคอนเปิด oi oi -... แพ้ oi แรก
— Alexandr
54

ใช้สิ่งนี้ 

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

ฉันมีปัญหาที่คล้ายกันกับ Amazon Cloudfront CDN แต่ได้รับการแก้ไขหลังจากฉันเริ่มโหลดจาก maxcdn

— Kumar Deepam
แหล่งที่มา
6
สิ่งนี้ถือว่าคุณต้องการใช้ CDN ของ font-awesome สำหรับสภาพแวดล้อมการผลิตเชิงพาณิชย์ฉันจะไม่ทำเช่นนี้
— Jay Edwards
48

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

หวังว่าจะช่วยใครซักคน

— Bren1818
แหล่งที่มา
11
บิงโก! ขอบคุณมาก. Metro-UI กำลังเอาชนะตระกูลฟอนต์ที่ยอดเยี่ยม ฉันต้องเพิ่มสิ่งนี้: .fa {font-family: 'FontAwesome'! สำคัญ } จากนั้นก็ใช้งานได้
— Debbie
1
อ๋อ โง่และตัวเล็ก สิ่งนี้ - การเปลี่ยนแบบอักษรสำหรับสิ่งอื่นและส่งผลกระทบต่อไอคอนแบบอักษรอันน่ากลัว - เกิดขึ้นกับฉันบ่อยครั้งจนมันกลายเป็นคนโง่
— Edd
2
ใช่ - บรรทัดนี้คือการตำหนิ (เป็นกฎที่สำคัญกว่า!): * {font-family: 'Source Sans Pro'! important}}
— Svet
1
นี่คือเคล็ดลับที่สำคัญและมีประโยชน์ที่สุดเกี่ยวกับการใช้ Font Awesome เพื่อหลีกเลี่ยงการเสียเวลาในการค้นหาปัญหา
— Dez
22

หากคุณใช้ LESS หรือ SASS ให้เปิดไฟล์ font-awesome.less / 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;
}

เหมือนกับ CSS ยกเว้นคุณแก้ไขเส้นทางในบล็อกการประกาศของ font-face:

@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
แหล่งที่มา
มีวิธีการนำเข้าไอคอนบางอย่างแทนที่จะเป็นไอคอนทั้งหมดหรือไม่ ฉันต้องการรวบรวมไฟล์ css ของฉันเป็นไอคอนไม่กี่อัน
— user805981
@fa-font-path: "../fonts";ทำงานให้ฉัน (สังเกตการขาดหายไปsเพิ่ม)
— prograhammer
18

เปิด font-awesome.css ของคุณมีรหัสเช่น:

@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">
— Erga Kandly
แหล่งที่มา
13

ฉันพยายามแก้ไขปัญหาเดียวกันด้วยวิธีแก้ไขปัญหาก่อนหน้านี้สองสามข้อ แต่พวกเขาไม่ทำงานในสถานการณ์ของฉัน ในที่สุดฉันเพิ่ม 2 บรรทัดใน HEAD และใช้งานได้:

<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">
— Vojkan Cvijanovic
แหล่งที่มา
12

ฉันใช้Font Awesome 4.3.0เพียงแค่เชื่อมโยงจากงาน maxcdnเป็นที่กล่าวถึงที่นี่ ,

แต่การโฮสต์ในเซิร์ฟเวอร์ของคุณการวางแบบอักษรและ css ไว้ในโฟลเดอร์เดียวกันนั้นเหมาะกับฉันแบบนี้

ป้อนคำอธิบายรูปภาพที่นี่

จากนั้นเพียงแค่ลิงก์ css:

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

หวังว่าจะช่วยให้ใครบางคน

— shaijut
แหล่งที่มา
8

คุณต้องมี 2 คลาสคลาส fas และคลาส fa อาจใช้งานได้:

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

// Correct
<i class="fa fa-search"></i>
— อิสราเอล
แหล่งที่มา
3
ไม่ได้ตระหนักถึงสิ่งนี้ - จาก v5 ตอนนี้พวกเขาต้องการชั้นเรียนfabหรือfasแทนที่จะเป็นfaชั้นเรียน
— Echilon
7

ฉันมีปัญหานี้ ปัญหาคือฉันมีสไตล์ CSS แบบอักษรสำหรับครอบครัว!! สำคัญกับการแทนที่แบบอักษรแบบอักษรแสนวิเศษ

— จอนนี่ไวท์
แหล่งที่มา
ฉันมีปัญหาเดียวกันกับ * {font-family: Helvetica, sans-serif! important; }
— Dubbo
6

ในกรณีที่คุณทำงานกับMavenและApache Wicketตรวจสอบสิ่งต่อไปนี้เพื่อลองแก้ไขปัญหาด้วย Font-Awesome และไอคอนที่ไม่ได้โหลด:

หากคุณวางไฟล์ไว้ในโครงสร้างไฟล์ต่อไปนี้

/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)คุณใช้ Package Resource Guard อย่างถูกต้องเพื่อให้โหลดไฟล์ฟอนต์ถูกต้องหรือไม่

ตัวอย่างจากชั้นเรียนของคุณที่ขยาย WebApplication:

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

}

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

โดยเฉพาะอย่างยิ่งถ้าคุณใช้ Maven ให้ระวังการกรองทรัพยากร อย่ากรองโฟลเดอร์ที่มีไฟล์ / ฟอนต์อยู่มิฉะนั้นไฟล์เหล่านั้นจะเสียหาย

ตัวอย่างจาก 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 และฟอนต์อยู่

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการกรองข้อมูลไบนารีโปรดดูเอกสารประกอบ:

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

โดยเฉพาะอย่างยิ่งเอกสารเตือน: " คำเตือน:อย่ากรองไฟล์ที่มีเนื้อหาไบนารีเช่นรูปภาพ! ซึ่งน่าจะส่งผลให้เกิดผลลัพธ์ที่เสียหายหากคุณมีทั้งไฟล์ข้อความและไฟล์ไบนารีเป็นทรัพยากรคุณต้องประกาศชุดทรัพยากรเอกสิทธิ์สองชุด ชุดรีซอร์สแรกกำหนดไฟล์ที่จะถูกกรองและชุดรีซอร์สอื่นกำหนดไฟล์ที่จะคัดลอกไม่เปลี่ยนแปลง ... "

— ฟิลิปป์
แหล่งที่มา
6

ฉันมีปัญหานี้และผ่านแต่ละขั้นตอนอย่างระมัดระวัง ... แม้ว่าฉันจะใช้ FA มานานแล้ว ... และฉันก็รู้ว่าฉันมีบรรทัดนี้ในไฟล์ css ของฉัน:

* {
font-family: Arial !important;
}

ความผิดพลาดที่โง่เง่า แต่สิ่งนี้อาจทำให้คนอื่นหลงทางในอนาคต!

— เจโด
แหล่งที่มา
4

คุณจะต้องกลับหัวเข้าถึงควบคุมอนุญาตให้-แหล่งกำเนิดไป*สำหรับไฟล์แบบอักษรของคุณ

— TRONIC
แหล่งที่มา
2
แน่นอน! การใช้ผู้ให้บริการบุคคลที่สามเพื่อให้บริการไฟล์แบบอักษรที่ยอดเยี่ยมของคุณไม่ได้ช่วยแก้ปัญหาของคุณคุณเพียงแค่ส่งให้ผู้อื่นเพื่อแก้ไข
— Simanas
4

ตั้งแต่เดือนธันวาคม 2018 ฉันพบว่าการใช้เวอร์ชั่นเสถียร 4.7.0 นั้นโฮสต์บน bootstrapcdn แทนที่จะเป็นตัวอักษรที่ยอดเยี่ยม 5.xx cdn บนเว็บไซต์ของพวกเขา - เนื่องจากทุกครั้งที่พวกเขาอัพเกรดรุ่นย่อยรุ่นก่อนหน้าจะแตก

<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 ต้องแน่ใจว่าได้เพิ่ม MIME ที่ถูกต้องเพื่อให้บริการไฟล์นามสกุล. woff MIME ที่ถูกต้องคือapplication/octet-stream

— Dario Brignone
แหล่งที่มา
หากคุณกำลังใช้ IIS 7 คุณสามารถทำตามขั้นตอนที่นี่: technet.microsoft.com/en-us/library/cc725608(v=ws.10).aspx
— dresh
3

font-weight: 900;

ฉันมีปัญหาที่แตกต่างกับ Font Awesome 5 แบบอักษรน้ำหนักเริ่มต้นควรเป็น 900 สำหรับไอคอน FontAwesome แต่ฉันเขียนทับมันเป็น 400 สำหรับช่วงและแท็กฉัน มันใช้งานได้เมื่อฉันแก้ไข

นี่คือการอ้างอิงปัญหาในหน้า Github ของพวกเขาhttps://github.com/FortAwesome/Font-Awesome/issues/11946

ฉันหวังว่ามันจะช่วยให้ใครบางคน

— Manian
แหล่งที่มา
1
ขอบคุณที่เป็นปัญหาของฉันเช่นกัน ฉันตั้งค่า Font-Family เป็น "Font Awesome 5 Free" แต่จำเป็นต้องกำหนดน้ำหนักแบบอักษรเป็น 900 ด้วย!
— ฮันส์ Vonn
3

หากคุณใช้เวอร์ชัน 5 * หรือสูงกว่าคุณต้องใช้

all.css หรือ all.min.css

การรวม fontawesome.css ใช้งานไม่ได้เนื่องจากไม่มีการอ้างอิงไปยังโฟลเดอร์webfontsและไม่มีการอ้างอิงถึง @ font-face หรือ font-family

คุณสามารถตรวจสอบสิ่งนี้ได้โดยค้นหารหัสสำหรับคุณสมบัติแบบอักษรตระกูลใน fontawesome.css หรือ fontawesome.min.css

— the_haystacker
แหล่งที่มา
อันนี้เป็นโซลูชั่นที่สมบูรณ์แบบสำหรับฉัน - คำตอบที่แย่เกินไปฉันไม่เห็นเลยและต้องคิดออกเอง
— Cold_Class
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. ภายในไฟล์ zip มีหลายโฟลเดอร์คุณต้องการเพียงแค่โฟลเดอร์ css และ webfonts ป้อนคำอธิบายรูปภาพที่นี่

    1. สร้าง 2 โฟลเดอร์ในโครงการเว็บของคุณและตั้งชื่อ css และ webfonts ป้อนคำอธิบายรูปภาพที่นี่

ชื่อเหล่านี้เป็นข้อบังคับ ตอนนี้คัดลอกเนื้อหาของ css และ webfonts จาก zip ไปยังโฟลเดอร์ที่เกี่ยวข้องในโครงการของคุณ และนั่นคือทั้งหมด!

ระวัง fontawesome! ความยอดเยี่ยมทำให้สิ่งที่ง่ายสำหรับผู้ใช้!

— BabaNew
แหล่งที่มา
1

ฉันเปลี่ยนจาก 3.2.1 เป็น 4.0.1 และโฟลเดอร์เป็นแบบอักษรและตอนนี้เรียกว่าแบบอักษร

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

src: url ('../ แบบอักษร / fontawesome-webfont.eot? v = 4.0.1');

ฉันหวังว่ามันจะช่วยให้ใครบางคน

— André Duarte
แหล่งที่มา
1

ฉันใช้แบบอักษรอย่างเป็นทางการ Awesome SASS Ruby Gemและแก้ไขข้อผิดพลาดโดยเพิ่มบรรทัดด้านล่างลงใน application.css.scss ของฉัน

@import "font-awesome-sprockets";

คำอธิบาย:

ไฟล์ font-awesome-sprockets รวมถึงฟังก์ชั่น Assasser Assasser Sprockets ที่ใช้สำหรับค้นหาเส้นทางที่เหมาะสมไปยังไฟล์ฟอนต์

— Marklar
แหล่งที่มา
1

หากคุณใช้ sass และนำเข้ามาใน main.scss ของคุณ @import '../vendor/font-awesome/scss/font-awesome.scss';

ข้อผิดพลาดอาจมาจากไฟล์ font-awesome.scss ที่ค้นหาไฟล์ฟอนต์ในพา ธ สัมพัทธ์

ดังนั้นอย่าลืมแทนที่ตัวแปร $ fa-font-path: $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

เช่นนี้ไม่จำเป็นต้องเพิ่ม cdn ใน index.html ของคุณ

— vilsbole
แหล่งที่มา
1

ตรวจสอบไฟล์ fontawesome-all.css อีกครั้งที่ด้านล่างสุดจะมีพา ธ ไปยังโฟลเดอร์ webfonts Mine มีรูปแบบ "../webfonts" ซึ่งหมายความว่าไฟล์ css จะมองขึ้นไป 1 ระดับจากที่ที่มันอยู่ เนื่องจากไฟล์ css ทั้งหมดของฉันอยู่ในโฟลเดอร์ css และฉันเพิ่มแบบอักษรไปยังโฟลเดอร์เดียวกันสิ่งนี้ไม่ทำงาน

เพียงแค่เลื่อนโฟลเดอร์ฟอนต์ของคุณขึ้นไปอีกระดับและทุกอย่างน่าจะดี :)

ทดสอบกับ Font Awesome 5.0

— รอสส์
แหล่งที่มา
นี่ควรเป็นคำตอบที่ต้องการเนื่องจากตอบคำถามโดยตรงโดยไม่เชื่อมโยงกับเอกสารที่ล้าสมัย Kudos
— Kyle Champion
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>
— Enrique Martinez
แหล่งที่มา
1

ไฟล์ /css/all.css มีการกำหนดสไตล์หลักรวมถึงรูปแบบไอคอนทั้งหมดที่คุณต้องการเมื่อใช้ Font Awesome โฟลเดอร์ / webfonts มีไฟล์แบบอักษรทั้งหมดที่การอ้างอิง CSS ข้างต้นและขึ้นอยู่กับ

คัดลอกทั้งโฟลเดอร์ / webfonts และ /css/all.css ไปยังไดเรกทอรีสินทรัพย์คงที่ของโครงการของคุณ (หรือที่คุณต้องการเก็บสินทรัพย์ส่วนหน้าหรือสิ่งของผู้ขาย)

เพิ่มการอ้างอิงไปยังไฟล์ /css/all.css ที่คัดลอกลงในเทมเพลตหรือเพจแต่ละรายการที่คุณต้องการใช้ Font Awesome บน

เพียงแค่ไปที่ - https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself คุณจะได้รับคำตอบ

— Dipesh Chauhan
แหล่งที่มา
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");
}

ฉันจะไม่แนะนำให้ทำเช่นนี้เว้นแต่คุณจะต้องทำ แต่ก็ใช้ได้ผลสำหรับฉัน แน่นอนคุณควรทำซ้ำสำหรับรูปแบบตัวอักษรทั้งหมดในไฟล์ font-awesome.css

— ทิม
แหล่งที่มา
0

มันไม่ทำงานสำหรับฉันเพราะฉันมี Allow from noneคำสั่งสำหรับไดเรกทอรีรากในการตั้งค่า Apache ของฉัน นี่คือวิธีที่ฉันได้มันไปทำงาน ...

โครงสร้างไดเรกทอรีของฉัน:

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

ฉันเลือกที่จะไม่อนุญาตการเข้าถึงรูทของฉันต่อไปและเพิ่มรายการไดเรกทอรีอื่นใน apache config สำหรับ root / font-awesome / 

<Directory "/path/root/font-awesome/">
    Allow from all
</Directory>
— user3325776
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.