Câu hỏi Bootstrap 3 Glyphicons CDN


CHÚ Ý!

Các biểu tượng Bootstrap đã trở lại sau hợp nhất yêu cầu kéo này.


Sau khi trở lại và ra về điều này trong vài tuần qua, tôi đã quyết định khôi phục phông chữ biểu tượng Glyphicons đến repo chính. Với các biểu tượng phổ biến trong giao diện người dùng, nó có thể là một sự bất đồng đối với hầu hết mọi người không bao gồm chúng (hoặc một số phông chữ biểu tượng khác) ở cùng một chỗ với CSS và JS.

Với bản cập nhật này, những điều sau đây:

  • Khôi phục tài liệu (trên trang Thành phần)
  • Biến mới, @icon-font-path và @icon-font-name, để linh hoạt trong việc thêm và xóa phông chữ biểu tượng
  • Nâng cấp lên Glyphicons mới nhất (thêm 40 biểu tượng mới)
  • Loại bỏ Glyphicons cũ đề cập đến từ trang CSS

Chúng tôi sẽ làm việc để cải thiện tùy chỉnh phông chữ biểu tượng trong tương lai để trao đổi thư viện phông chữ có thể dễ dàng hơn (đó là toàn bộ động lực cho việc xóa ban đầu).


Đâu là địa chỉ CDN của phiên bản mới của Twitter Bootstrap Glyphicons?

Từ Bootstrap 3 chúng được chuyển vào một kho lưu trữ riêng biệtnhưng tôi không tìm thấy bất kỳ CDN nào.

Từ tài liệu chính thức:

Với sự ra mắt của Bootstrap 3, các biểu tượng đã được chuyển đến một kho lưu trữ riêng biệt. Điều này giúp cho dự án chính trở nên gọn gàng nhất có thể, giúp mọi người dễ dàng trao đổi thư viện biểu tượng hơn và làm cho phông chữ biểu tượng Glyphicons dễ dàng hơn cho nhiều người hơn ngoài Bootstrap.

Trên trang web chinh thưc chúng không cung cấp url CDN cho các biểu tượng.

Nơi có thể tìm thấy nó? Tôi không muốn tải xuống kho lưu trữ và đưa nó vào dự án của mình.


76
2017-08-14 03:45


gốc


Các tệp css chủ đề của Boostrap CDN's Bootswatch không bao gồm glyphicons, tôi có đúng không? Tập tin: netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/… - trante


Các câu trả lời:


Với gần đây phát hành bootstrap 3và các glyphicons được sáp nhập trở lại repo Bootstrap chính, CD Bootstrap hiện đang phân phát Bootstrap 3.0 css hoàn chỉnh bao gồm Glyphicons. Tham chiếu css Bootstrap là tất cả những gì bạn cần bao gồm: Glyphicons và các phụ thuộc của nó là trên các đường dẫn tương đối trên trang CDN và được tham chiếu trong bootstrap.min.css.

Trong html:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

Trong css:

 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

Đây là một công việc bản giới thiệu.

chú thích mà bạn phải sử dụng .glyphicon các lớp thay vì .icon:

Thí dụ:

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

Cũng lưu ý mà bạn vẫn cần phải bao gồm bootstrap.min.js để sử dụng các thành phần JavaScript Bootstrap, hãy xem CD Bootstrap cho url.


Nếu bạn muốn sử dụng Glyphicons riêng biệt, bạn có thể làm điều đó bằng cách tham khảo trực tiếp Glyphicons css trên CD Bootstrap.

Trong html:

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

Trong css:

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

Kể từ khi css tệp đã bao gồm tất cả các phụ thuộc Glyphicons cần thiết (trong một đường dẫn tương đối trên trang web Bootstrap CDN), thêm css là tất cả những gì cần làm để bắt đầu sử dụng Glyphicons.

Đây là một công việc bản giới thiệu của Glyphicons không có Bootstrap.


131
2017-08-14 07:17



Hmm, thú vị. Có vẻ là câu trả lời đúng, nhưng các biểu tượng không xuất hiện khi chuyển sang url này. Font tuyệt vời hoạt động tốt. Tệp CSS có các quy tắc biểu tượng được tải. Tôi có cần thêm gì nữa không? Hình ảnh? - Ionică Bizău
Làm việc cho tôi. BẢN GIỚI THIỆU - edsioufi
@John ツ Lớp đầu tiên trong tệp CSS là lớp @ font-face nhập tất cả các tệp phông chữ cần thiết (bao gồm một tệp svg tệp hình ảnh), trong một đường dẫn tương đối trên CD Bootstrap trang web. Vì vậy, bạn không cần bất cứ điều gì nhiều hơn nữa. - edsioufi
Cảm ơn cho bản demo. Tôi sẽ xem xét sau và sẽ chấp nhận câu trả lời này ngay sau khi ứng dụng của tôi hoạt động. Vui lòng chỉnh sửa câu trả lời của bạn và thêm nội dung từ nhận xét vào id. Cảm ơn! - Ionică Bizău
Cảm ơn bạn rất nhiều. Tôi vừa thấy .icon không còn được sử dụng nữa. - Ionică Bizău


Một cách khác là sử dụng Font-Awesome cho các biểu tượng:

Bao gồm Font-Awesome

Mở Font-Awesome trên CDNJS và sao chép url CSS của phiên bản mới nhất:

<link rel="stylesheet" href="<url>">

Hoặc trong CSS

@import url("<url>");

Ví dụ (lưu ý, phiên bản sẽ thay đổi):

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

Sử dụng:

<i class="fa fa-bed"></i>

Nó chứa rất nhiều biểu tượng!


27
2017-08-14 03:54



Sau nhiều giờ cố gắng làm cho các biểu tượng hoạt động, việc liên kết đến cdn phông chữ tuyệt vời đã giải quyết được vấn đề của tôi. Cảm ơn. - Eenvincible
@Eenvincible Đừng quên sử dụng phiên bản mới nhất. Các liên kết từ câu trả lời của tôi là một chút lỗi thời. - Ionică Bizău
Cuối cùng tôi đã nhận được nó để làm việc sau khi sử dụng một cdn. - Eenvincible
URL đã thay đổi: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> - nimrod
Và tệp phông chữ tuyệt vời chứa nhiều biểu tượng hơn. Tốt đẹp. - dudewad


Mặc dù Bootstrap CDN khôi phục glyphicons thành bootstrap.min.css, nhưng các tệp css Bootswrap CDN của Bootstrap CDN không bao gồm glyphicons.

Ví dụ: Amelia theme: http://bootswatch.com/amelia/ 

Mặc định Amelia có glyphicons trong tập tin này: http://bootswatch.com/amelia/bootstrap.min.css 

Nhưng tệp css Bootstrap CDN không bao gồm glyphicons: http://netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/bootstrap.min.css

Vì vậy, như @edsioufi đã đề cập, bạn nên bao gồm bạn nên bao gồm glphicons css, nếu bạn sử dụng các tệp Bootswatch từ CDN bootstrap. Tập tin: http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css


2
2017-09-17 18:40



Ngoài ra các tùy biến tại bootstrap tạo ra các tập tin phông chữ không hợp lệ đôi khi. Tải xuống riêng các tệp phông chữ đã giúp tôi lấy lại biểu tượng của mình. Đôi khi một lỗi gói bootstrap của nó. - Clain Dsilva
trante: thông tin của bạn không đúng. Nếu bạn kiểm tra các liên kết của bạn, bạn sẽ thấy rằng Bootstrap CDN cho chủ đề bootswatch (s) không bao gồm glyphicons. - Michael Moriarty