Bootstrap 4 - Di chuyển Glyphicons?

Question

Chúng tôi có một dự án sử dụng glyphicons mạnh mẽ. Bootstrap v4 giảm phông chữ glyphicon hoàn toàn.

Có tương đương với các biểu tượng đi kèm với Bootstrap V4 không?

http://v4-alpha.getbootstrap.com/migration/

Answer 1

Bạn có thể sử dụng cả hai Font Awesome và Github Octicons như một sự thay thế miễn phí cho Glyphicons.

Bootstrap 4 cũng chuyển từ Less thành Sass, vì vậy bạn có thể tích hợp Sass (SCSS) của phông chữ vào quá trình xây dựng, để tạo một tệp CSS cho các dự án của bạn.

Xem thêm http://v4-alpha.getbootstrap.com/getting-started/build-tools/ để tìm hiểu làm thế nào để thiết lập công cụ của bạn:

1. Tải về và cài đặt Node, mà chúng tôi sử dụng để quản lý phụ thuộc của chúng tôi.
2. Cài đặt các công cụ dòng lệnh Grunt, grunt-cli, với npm install -g grunt-cli.
3. Điều hướng đến thư mục gốc/bootstrap và chạy npm install để cài đặt các phụ thuộc cục bộ của chúng tôi được liệt kê trong package.json.
4. Cài đặt Ruby, cài đặt Bundler với gói cài đặt gem và cuối cùng là chạy bó. Điều này sẽ cài đặt tất cả các phụ thuộc Ruby, 5. chẳng hạn như Jekyll và Sass linter.

Font tạo ảnh vui nhộn

1. Tải về các tập tin ở https://github.com/FortAwesome/Font-Awesome
2. Sao chép thư mục font-awesome/scss vào thư mục/bootstrap của bạn
3. Mở /bootstrap/bootstrap.scss SCSS của bạn và viết ra những điều sau đây Mã SCSS ở cuối tệp này: $fa-font-path: "../fonts"; @import "../font-awesome/scss/font-awesome.scss";
4. Lưu ý rằng bạn cũng có để sao chép các tập tin phông chữ font-awesome/fonts-dist/fonts hoặc bất kỳ thư mục nào khác do $fa-font-path trong bước trước
5. Run: grunt dist biên dịch lại mã của bạn với Font Tuyệt thật

Github Octicons

1. Tải xuống các tệp tại https://github.com/github/octicons/
2. Sao chép thư mục octicons vào thư mục/bootstrap của bạn
3. Mở scss/bootstrap/bootstrap của bạn.SCSS và viết xuống mã SCSS sau vào cuối của tập tin này: $fa-font-path: "../fonts"; @import "../octicons/octicons/octicons.scss";
4. Chú ý rằng bạn cũng phải sao chép các tập tin phông chữ font-awesome/fonts-dist/fonts hoặc bất kỳ thư mục nào khác do $fa-font-path trong bước trước
5. Run : grunt dist để biên dịch lại mã của bạn bằng Octicons

Lưu ý rằng Bootstrap 4 yêu cầu trình tự động sửa lỗi CSS để biên dịch. Khi bạn đang sử dụng một trình biên dịch Sass tĩnh để biên dịch CSS của bạn, bạn sẽ phải chạy autoprefixer sau đó.

Bạn cũng có thể sử dụng Bower để cài đặt phông chữ ở trên. Sử dụng Bower Font Awesome cài đặt các tập tin của bạn trong bower_components/components-font-awesome/ cũng lưu ý rằng Github Octicons đặt octicons/octicons/octicons-.scss làm tệp chính trong khi bạn nên sử dụng octicons/octicons/sprockets-octicons.scss.

Tất cả những điều trên sẽ biên dịch tất cả mã CSS của bạn bao gồm cả một tệp, chỉ yêu cầu một yêu cầu http. Ngoài ra, bạn cũng có thể tải phông chữ Font-Awesome từ CDN, cũng có thể nhanh chóng trong nhiều trường hợp. Cả hai phông chữ trên CDN cũng bao gồm các tệp phông chữ (sử dụng dữ liệu-uri, có thể không được hỗ trợ cho các trình duyệt cũ). Vì vậy, hãy xem xét giải pháp nào phù hợp nhất với tình huống của bạn tùy thuộc vào các trình duyệt khác để hỗ trợ.

Đối với font chữ tuyệt vời dán đoạn mã sau vào '' của HTML của trang web:

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

Cũng thử Yeoman generator to scaffold out a front-end Bootstrap 4 Web app để kiểm tra Bootstrap 4 với Font ảnh vui nhộn hoặc Github Octicons.

Glyphicons

Trên trang web Bootstrap bạn có thể đọc:

Bao gồm hơn 250 glyphs ở định dạng phông chữ từ tập Glyphicon Halflings. Glyphicons Halflings thường không có sẵn miễn phí, nhưng tác giả của họ đã làm cho chúng sẵn sàng cho Bootstrap miễn phí. Như một lời cảm ơn, chúng tôi chỉ yêu cầu bạn đưa liên kết trở lại Glyphicons bất cứ khi nào có thể.

Vì tôi hiểu bạn có thể sử dụng 250 glyphs miễn phí giới hạn cho Bootstrap nhưng không giới hạn ở phiên bản 3 độc quyền. Vì vậy, bạn có thể sử dụng chúng cho Bootstrap 4 quá.

1. Sao chép tập tin từ phông chữ: https://github.com/twbs/bootstrap-sass/tree/master/assets/fonts/bootstrap
2. Sao chép tập tin https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_glyphicons.scss vào bootstrap/scss thư mục của bạn

3. Mở /bootstrap/bootstrap.scss SCSS của bạn và viết xuống mã SCSS sau vào cuối của tập tin này :

   $bootstrap-sass-asset-helper: false; $icon-font-name: 'glyphicons-halflings-regular'; $icon-font-svg-id: 'glyphicons_halflingsregular'; $icon-font-path: '../fonts/'; @import "glyphicons";

4. Run: grunt dist biên dịch lại mã của bạn với Glyphicons

Answer 2

Tệp glyphicons.less từ Bootstrap 3 có sẵn trên GitHub. https://github.com/twbs/bootstrap/blob/master/less/glyphicons.less

Nó cần những biến:

@icon-font-path:   "../fonts/"; 
@icon-font-name:   "glyphicons-halflings-regular"; 
@icon-font-svg-id:  "glyphicons_halflingsregular"; 

Sau đó, bạn có thể chuyển đổi các tập tin .less vào một tập tin .css mà bạn có thể sử dụng trực tiếp. Bạn có thể thực hiện việc này trực tuyến trên less2css.org. Ở đây tôi đã done it for you, lưu nó dưới dạng glyphicons.css và bao gồm nó trong các tệp HTML của bạn.

<link href="/Content/glyphicons.css" rel="stylesheet" /> 

Bạn cũng cần phông chữ Glyphicon trong gói Bootstrap 3, đặt chúng trong thư mục/fonts /.

Bây giờ bạn có thể tiếp tục sử dụng Glyphicons với Bootstrap 4 như bình thường.

Answer 3

Di chuyển từ Glyphicons sang Font Awesome khá dễ dàng.

Bao gồm tham chiếu đến Phông chữ tuyệt vời (cục bộ hoặc sử dụng CDN).

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

Sau đó, chạy tìm kiếm và thay thế nơi bạn tìm kiếm "glyphicon glyphicon-" và thay thế bằng "fa fa-". Hầu hết các tên lớp CSS đều giống nhau. Một số đã thay đổi mặc dù, vì vậy bạn phải tự sửa chữa những người.

Answer 4

Tổng quan:

Tôi đang sử dụng bootstrap 4 không có glyphicons. Tôi tìm thấy một vấn đề với treeview bootstrap mà phụ thuộc vào glyphicons. Tôi đang sử dụng treeview như là, và tôi đang sử dụng scss @extend để dịch các phong cách lớp biểu tượng để phông chữ phong cách lớp học tuyệt vời. Tôi nghĩ rằng điều này khá trơn tru (nếu bạn hỏi tôi)!

Chi tiết:

Tôi đã sử dụng scss @extend để xử lý nó cho tôi.

Trước đây tôi đã quyết định sử dụng phông chữ tuyệt vời vì không có lý do nào tốt hơn so với trước đây tôi đã sử dụng nó.

Khi tôi đi thử bootstrap treeview, tôi thấy rằng các biểu tượng bị thiếu, bởi vì tôi không có glyphicons được cài đặt.

tôi quyết định sử dụng tính năng @extend SCSS, có các lớp glyphicon sử dụng các lớp font-tuyệt vời như vậy:

.treeview { 
    .glyphicon { 
    @extend .fa; 
    } 
    .glyphicon-minus { 
    @extend .fa-minus; 
    } 
    .glyphicon-plus { 
    @extend .fa-plus; 
    } 
} 

Answer 5

Nếu bạn đang tìm kiếm một cách để tham chiếu chéo Bootstrap 3 glyphicons với Biểu tượng Phông chữ tuyệt vời Tôi đã tạo một tệp tham chiếu pdf.

Bạn có thể lấy nó ở đây: https://bootstrapcreative.com/shop/bootstrap-migration-guide/