Bootstrap 3 Glyphicons không hoạt động

Tôi đã tải xuống bootstrap 3.0 và không thể làm cho glyphicons hoạt động. Tôi nhận được một số loại lỗi "E003". Có ý kiến ​​giải thích tại sao điều này lại xảy ra không? Tôi đã thử cả địa phương và trực tuyến và tôi vẫn gặp vấn đề tương tự.

Tôi đã có cùng một vấn đề và không thể tìm thấy bất kỳ thông tin nào về nó ngoại trừ trong các bình luận ẩn trên trang này. Các tệp phông chữ của tôi đang tải tốt theo Chrome, nhưng các biểu tượng không hiển thị đúng. Tôi đang làm cho câu trả lời này vì vậy nó sẽ hy vọng giúp đỡ người khác.

Đã xảy ra lỗi với các tệp phông chữ mà tôi đã tải xuống từ công cụ tùy biến của Bootstrap 3. Để có được phông chữ chính xác, hãy truy cập trang chủ Bootstrap và tải xuống tệp .zip đầy đủ. Trích xuất bốn tệp phông từ đó vào thư mục phông chữ của bạn và mọi thứ sẽ hoạt động.

Lưu ý cho độc giả: hãy chắc chắn đọc bình luận của @ user2261073 và câu trả lời của @ Jeff liên quan đến một lỗi trong tùy biến. Nó có thể là nguyên nhân của vấn đề của bạn.

Các tập tin phông chữ không được tải chính xác. Kiểm tra xem các tập tin có ở vị trí dự kiến ​​của họ.

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Theo chỉ định của Daniel, nó cũng có thể là một vấn đề bắt chước. Các công cụ dev của Chrome hiển thị phông chữ đã tải xuống trong tab mạng:

Trong trường hợp của tôi, tôi đã nhận được 404 cho glyphicons-Halflings-normal.woff và glyphicons không hiển thị trên trình duyệt di động.

Có vẻ như có một số nhầm lẫn về loại MIME cho woff, hơn một loại MIME được chấp nhận bởi các trình duyệt khác nhau, nhưng W3C nói :

application/font-woff

Chỉnh sửa: Sau khi kiểm tra loại MIME sau cho woff hoạt động trên tất cả các trình duyệt hiện tại:

application/x-font-woff

Chỉnh sửa: Phiên bản mới nhất của Bootstrap tại thời điểm này (3.3.5) sử dụng phông chữ .woff2 với kết quả ban đầu giống như .woff, W3C vẫn xác định thông số kỹ thuật nhưng hiện tại loại MIME có vẻ là:

application/font-woff2

-Nếu bạn đã làm theo câu trả lời được đánh giá cao nhất và nó vẫn không hoạt động :

Các Fontthư mục PHẢI được vào mức độ tương tự như thư mục CSS của bạn. Sửa đường dẫn trong bootstrap.css sẽ không hoạt động.

Bootstrap.cssphải điều hướng đến Fontsthư mục chính xác như thế này:

@font-face {
    font-family: 'Glyphicons Halflings';

    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Nếu các giải pháp khác không hoạt động, bạn có thể muốn thử nhập Glyphicons từ nguồn bên ngoài, thay vì dựa vào Bootstrap để làm mọi thứ cho bạn. Để làm điều này:

Bạn có thể làm điều này trong HTML:

<link href="https://stackoverflow.com//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Hoặc CSS:

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css")

Tín dụng cho edsiofi từ chủ đề này: Bootstrap 3 Glyphicons CDN

Trong trường hợp người khác kết thúc tại đây và sử dụng Bootstrap> = v4.0: hỗ trợ glyphicon bị hủy

Phần có liên quan từ các ghi chú phát hành:

Bỏ phông chữ biểu tượng Glyphicons. Nếu bạn cần biểu tượng, một số tùy chọn là:

phiên bản ngược dòng của Glyphicons

Octicons

Phông chữ tuyệt vời

Nguồn: https://v4-alpha.getbootstrap.com/migration/#components

Nếu bạn muốn sử dụng glyphicons, bạn cần tải xuống riêng.

Cá nhân tôi đã thử Font Awesome và nó khá tốt. Thêm biểu tượng tương tự như cách glypicon:

<i class="fas fa-chess"></i>

Tôi đã xem qua câu hỏi cũ này của tôi và vì những gì được cho là câu trả lời đúng cho đến bây giờ, đã được tôi đưa ra trong các bình luận, tôi nghĩ rằng tôi cũng xứng đáng nhận được tín dụng cho nó.

Vấn đề nằm ở chỗ các tệp phông chữ glyphicon được tải xuống từ công cụ tùy biến của bootstrap không giống với các tệp được tải xuống từ chuyển hướng được tìm thấy tại trang chủ của bootstrap. Những cái đang hoạt động như chúng nên là những cái có thể được tải xuống từ liên kết sau:

http://getbootstrap.com/getting-started/#download

Bất cứ ai gặp vấn đề với các tập tin tùy biến xấu cũ nên ghi đè lên các phông chữ từ liên kết ở trên.

Websites Azure đang thiếu WOFF cấu hình MIME. Bạn phải thêm mục sau vào web.config

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        </staticContent>
    </system.webServer>
</configuration> 

Như @Stijn đã mô tả, vị trí mặc định trong Bootstrap.csskhông chính xác khi cài đặt gói này từ Nuget.

Thay đổi phần này để trông như thế này:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('Content/fonts/glyphicons-halflings-regular.eot');
  src: url('Content/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded- opentype'), url('Content/fonts/glyphicons-halflings-regular.woff') format('woff'), url('Content/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('Content/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Bạn có thể thêm dòng mã này và thực hiện.

<link href="https://stackoverflow.com//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Cảm ơn.

IIS sẽ không .wofflưu trữ tệp máy chủ theo mặc định, vì vậy, trong IIS, bạn sẽ cần thêm một <mimeMap>mục vào web.configtệp của mình ;

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
        </staticContent>
    </system.webServer>
</configuration>

Bạn có tất cả các tập tin dưới đây trong thư mục phông chữ của bạn

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

Tôi đã sửa đổi tập tin ít biến hơn. Tôi đã sửa đổi biến

@icon-font-path:          "fonts/";    

bản gốc là

@icon-font-path:          "../fonts/"; 

Nó đã gây ra một vấn đề

Điều này là do mã hóa sai trong bootstrap.css và bootstrap.min.css. Khi bạn tải xuống Bootstrap 3.0 từ Customizer, đoạn mã sau bị thiếu:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Vì đây là mã chính để sử dụng Glyphicons, nên nó sẽ không hoạt động ...

Tải về các tập tin css từ gói đầy đủ và mã này sẽ được thực hiện.

Đây là lý do, tại sao các biểu tượng không hiển thị cho tôi:

* {
    arial, sans-serif !important;
}

Sau khi tôi loại bỏ phần này của tôi CSS, mọi thứ hoạt động như bình thường. Điều quan trọng là một trong những gây ra rắc rối.

Một vấn đề / giải pháp khác có thể có mã Bootstrap 2.x này:

<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>

và khi di chuyển dựa trên hướng dẫn ( .icon-* ---> .glyphicon .glyphicon-*):

<button class="btn btn-default" ng-click="open()"><i class="glyphicon-calendar"></i></button>

bạn quên thêm lớp biểu tượng (chứa tham chiếu phông chữ):

<button class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>

Dưới đây là những gì cố định nó cho tôi. Tôi đã nhận được lỗi "URI xấu" khi sử dụng trong bảng điều khiển Fireorms. Các biểu tượng được hiển thị dưới dạng số E ###. Tôi đã phải thêm một tệp .htaccess trong thư mục 'phông chữ' của mình. <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> Bản sao có thể có của: Phông chữ có thể tải xuống trên firefox: không cho phép truy cập URI hoặc truy cập chéo trang

Đây là một cảnh quay dài, nhưng đó là trường hợp của tôi và vì nó chưa có ở đây.

Nếu bạn đang biên dịch Twitter Bootstrap từ SASS bằng cách sử dụng gulp-sasshoặc grunt-sassnghĩa là.node-sass. Đảm bảo các mô-đun nút của bạn được cập nhật, đặc biệt nếu bạn đang làm việc trên một dự án khá cũ.

Nó chỉ ra rằng vào một lúc nào đó, chỉ thị SASS @at-rootđược sử dụng trong định nghĩa của @font-faceglyphicons, xem https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assstets .

Gotcha ở đây là có node-sassnghĩa là. libsasskhông ủng hộ @at-rootchỉ thị nếu nó quá cũ. Nếu đây là trường hợp bạn sẽ nhận được một @font-facegói trong @at-rootđó trình duyệt không biết phải làm gì với. Kết quả của việc này là sẽ không có phông chữ nào được tải xuống và bạn có thể sẽ thấy rác thay vì các biểu tượng.

Lưu ý: bên dưới có thể là một kịch bản thích hợp, nhưng tôi muốn chia sẻ nó trong trường hợp người khác có thể thấy nó hữu ích.

Trong một dự án đường ray, chúng tôi đang sử dụng lại khá nhiều thông qua một viên đá quý là công cụ Rails sử dụng bootstrap-sass. Tất cả đều tốt trong dự án chính ngoại trừ độ phân giải đường dẫn phông chữ glyphicon.

GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found) 

Chúng tôi thấy rằng đó $bootstrap-sass-asset-helperlàfalse trong quá trình giải quyết khi chúng tôi mong đợi nó là sự thật, vì vậy đường dẫn là khác nhau.

Chúng tôi đã gây ra việc $bootstrap-sass-asset-helperkhởi tạo trong gem engine bằng cách thực hiện:

// explicit sprockets import to get glyphicon font paths correct
@import 'bootstrap-sprockets';
@import "bootstrap/variables";

ví dụ: điều này gây ra đường dẫn để giải quyết:

/assets/bootstrap/glyphicons-halflings-regular.woff

Một lần nữa, điều này không cần thiết trong bất kỳ dự án đường ray thông thường nào bằng cách sử dụng bootstrap-sass , chúng tôi tình cờ sử dụng lại rất nhiều lượt xem và điều này hiệu quả với chúng tôi. Hy vọng điều này có thể hỗ trợ người khác.

Đây là những gì tài liệu chính thức nói về phông chữ không kết xuất.

Thay đổi vị trí phông chữ biểu tượng Bootstrap giả định các tệp phông chữ biểu tượng sẽ được đặt trong thư mục ../fonts/, liên quan đến các tệp CSS đã biên dịch. Di chuyển hoặc đổi tên các tệp phông chữ đó có nghĩa là cập nhật CSS theo một trong ba cách: Thay đổi các biến @ @ icon-font-path và / hoặc @ icon-font-name trong nguồn Ít tệp. Sử dụng tùy chọn URL tương đối được cung cấp bởi trình biên dịch Ít hơn. Thay đổi đường dẫn url () trong CSS đã biên dịch. Sử dụng bất kỳ tùy chọn nào phù hợp nhất với thiết lập phát triển cụ thể của bạn.

Ngoài ra, bạn có thể bỏ lỡ việc sao chép thư mục phông chữ vào thư mục gốc

Tôi đã có vấn đề này và nó được gây ra bởi tập tin biến.less. Ghi đè nó để đặt giá trị đường dẫn biểu tượng-phông chữ đã giải quyết vấn đề.

Các tập tin có cấu trúc như thế này:

\Content
        \Bootstrap
        \Fonts
 styles.less
 variables.less

Thêm tệp biến.less của riêng tôi vào thư mục gốc của Nội dung và tham chiếu tệp này trong tệp style.less đã giải quyết lỗi 404.

Biến.less chứa:

@icon-font-path:          "fonts/";

Tôi đã nhận Bootstrap từ NuGet. Khi tôi xuất bản trang web của mình, glyphs không hoạt động.

Trong trường hợp của tôi, tôi đã làm cho nó hoạt động bằng cách đặt Hành động xây dựng cho mỗi tệp phông chữ thành 'Nội dung' và đặt chúng thành 'Sao chép luôn'.

tôi đã có một mã chiều rộng hộp \ e094 cho glyphicon-mũi tên xuống, trên thực tế tôi đã giải quyết vấn đề thêm glyphicon trong lớp css như thế:

<i class="glyphicon  glyphicon-arrow-down"></i>

nếu nó có thể giúp ai đó ...

Hãy chắc chắn rằng bạn không quá chỉ định họ phông chữ, ví dụ

*{font-family: Verdana;}

sẽ loại bỏ phông chữ Halflings khỏi phần tử i.

Tôi gặp vấn đề tương tự khi trình duyệt không thể tìm thấy các tệp phông chữ và vấn đề của tôi là do loại trừ trong tệp .htaccess của tôi là các tệp trong danh sách trắng không nên gửi để index.phpxử lý. Vì tệp phông chữ không thể được tải, các ký tự được thay thế bằng BLOB.

RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]

Như bạn có thể thấy, các tệp như hình ảnh, rss và xml được loại trừ khỏi phần ghi lại, nhưng các tệp phông chữ .woffvà .woff2tệp, vì vậy những tệp này cũng cần thêm vào danh sách trắng.

RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json|woff|woff2)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]

Thêm woffvà woff2vào danh sách trắng cho phép các tệp phông chữ được tải và glyphicons sau đó sẽ hiển thị đúng.

Bạn phải đặt theo thứ tự này:

<link rel="stylesheet" href="path/bootstrap.min.css"> 
<style type="text/css"> 
     @font-face {   font-family: 'Glyphicons Halflings';   
     src: url('../fonts/glyphicons-halflings-regular.eot');   
     src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/glyphicons-halflings-regular.woff') format('woff'),  
     url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
     url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); } 
</style>

Những gì làm việc cho tôi là thay thế các tuyến đường từ:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

đến

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('/assets/glyphicons-halflings-regular.eot');
  src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'),
  url('/assets/glyphicons-halflings-regular.ttf') format('truetype'),
  url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Đây là cách bạn đưa biểu tượng vào bootstrap 3

<span class="glyphicon glyphicon-bell"></span>

http://glyphicons.bootstrapcheatsheets.com/

Mong rằng sẽ giúp.

@font-face {
     font-family: 'Glyphicons Halflings';
      src: url('../fonts/glyphicons-halflings-regular.eot');
      src: url('../fonts/glyphicons-halflings-regular.eot?#iefix')         format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');}

Tôi đang sử dụng bootstrap với không gian tên và glyphicons không hoạt động nhưng sau khi thêm dòng trên vào glyphicons mã hoạt động tốt.

Tôi vừa đổi tên phông chữ từ bootstrap.css bằng Ctrl + c, Ctrl + v và nó đã hoạt động.