Bootstrap 4 - Di chuyển Glyphicons?


317

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 được vận chuyển với Bootstrap V4 không?

Thay đổi

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


15
Bạn vẫn có thể sử dụng glyphicons , đơn giản là chúng sẽ không được vận chuyển với bootstrap nữa. Nếu bạn có vấn đề về giấy phép , bạn có thể kiểm tra phông chữ biểu tượng tuyệt vời .
Holt

1
Tôi tin rằng bạn phải trả tiền để sử dụng phông chữ. Tôi chỉnh sửa câu hỏi để làm rõ.
Vincent Poirier

Có một giấy phép miễn phí nơi bạn phải đặt một liên kết đến glyphicons (xem phần GLYPHICON MIỄN PHÍ trong liên kết trước của tôi). Như tôi đã nói trong nhận xét trước đây của tôi, có những lựa chọn thay thế như phông chữ tuyệt vời là nguồn mở và miễn phí, nhưng biết cái nào là tốt nhất sẽ rõ ràng dựa trên ý kiến ​​...
Holt

Điều đó thật tuyệt, nhưng gói miễn phí không cung cấp phông chữ, chỉ có các tệp PNG. Rõ ràng, chỉ có gói PRO bao gồm Tất cả các biểu tượng dưới dạng phông chữ web . Mặc dù bạn rất hữu ích (cảm ơn bạn), câu hỏi liên quan nhiều hơn đến các thành phần được bao gồm trong Bootstrap, nếu bạn có thể xác nhận rằng không có biểu tượng thuộc bất kỳ loại nào (hoặc sẽ có) trong v4, bạn có thể tạo câu trả lời.
Vincent Poirier

Nếu bạn truy cập vào liên kết được cung cấp fontawgie.io, bạn sẽ được yêu cầu thanh toán 60 đô la hoặc 99 đô la nếu bạn chờ đợi quá nhiều, vì vậy tôi tin rằng, fontawgie không còn miễn phí.
Gustavo Rodríguez

Câu trả lời:


269

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

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

Đồng thời xem https://getbootstrap.com/docs/4.1/getting-started/build-tools/ để tìm hiểu cách thiết lập công cụ của bạn:

  1. Tải xuống và cài đặt Node, mà chúng tôi sử dụng để quản lý các phụ thuộc của chúng tôi.
  2. Điều hướng đến /bootstrapthư mục gốc 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 pack.json.
  3. Cài đặt Ruby, cài đặt Bundler gem install bundlervà cuối cùng là chạy bundle install. Điều này sẽ cài đặt tất cả các phụ thuộc của Ruby, chẳng hạn như Jekyll và plugin.

Phông chữ tuyệt vời

  1. Tải xuống các tệp tại https://github.com/FortAwgie/Font-Awgie/tree/fa-4
  2. Sao chép font-awesome/scssthư mục vào thư mục / bootstrap của bạn
  3. Mở SCSS của bạn /bootstrap/bootstrap.scssvà viết mã SCSS sau vào cuối tệp này:

    $fa-font-path: "../fonts"; @import "../font-awesome/scss/font-awesome.scss";

  4. Chú ý rằng bạn cũng phải sao chép các tập tin phông chữ từ font-awesome/fontsphải dist/fontshoặc bất kỳ thiết lập thư mục công cộng khác do $fa-font-pathtrong bước trước

  5. Chạy: npm run distđể biên dịch lại mã của bạn với Font-Awesome

Octithons Github

  1. Tải xuống các tệp tại https://github.com/github/octicons/
  2. Sao chép octiconsthư mục vào /bootstrapthư mục của bạn
  3. Mở SCSS của bạn /bootstrap/bootstrap.scssvà viết mã SCSS sau vào cuối tệp 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ữ từ font-awesome/fontsphải dist/fontshoặc bất kỳ thiết lập thư mục công cộng khác do $fa-font-pathtrong bước trước

  5. Chạy: npm run distđể biên dịch lại mã của bạn với 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ừ bộ Glyphicon Halflings. Glyphicons Halflings thường không có sẵn miễn phí, nhưng người tạo ra chúng đã cung cấp chúng cho Bootstrap miễn phí. Để cảm ơn, chúng tôi chỉ yêu cầu bạn bao gồm một liên kết quay lại Glyphicons bất cứ khi nào có thể.

Theo tôi hiểu, bạn có thể sử dụng 250 glyph này 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ũng có thể sử dụng chúng cho Bootstrap 4.

  1. Sao chép các tệp phông chữ từ: https://github.com/twbs/bootstrap-sass/tree/master/assets/fonts/bootstrap
  2. Sao chép tệp https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_glyphicons.scss vào bootstrap/scssthư mục của bạn
  3. Mở scss /bootstrap/bootstrap.scss của bạn và viết mã SCSS sau vào cuối tệp 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";
  1. Chạy: npm run distđể biên dịch lại mã của bạn với Glyphicons

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

Bạn có thể tìm hiểu thêm về cách trộn với Bootstrap 4 SCSS tại đây .

Bạn cũng có thể sử dụng Bower để cài đặt các phông chữ ở trên. Sử dụng Bower Font Awesome sẽ cài đặt các tệp của bạn và bower_components/components-font-awesome/cũng lưu ý rằng Github Octicons đặt octicons/octicons/octicons-.scsstệp chính là 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 thành một tệp duy nhất, 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ó thể nhanh quá trong nhiều tình huống. Cả hai phông chữ trên CDN cũng bao gồm các tệp phông chữ (sử dụng data-uri's, có thể không được hỗ trợ cho các trình duyệt cũ hơn). 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 Phông chữ Tuyệt vời, dán đoạn mã sau vào <head>phần HTML của trang web của bạn:

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

Ngoài ra, hãy thử trình tạo Yeoman để tạo ra ứng dụng Web Bootstrap 4 phía trước để kiểm tra Bootstrap 4 với Font Awesome hoặc Github Octicons.


4
Điều này rất kỹ lưỡng và thực sự đã giúp làm rõ mọi thứ cho tôi và chỉ cho tôi đi đúng hướng mà tôi chọn. Bất cứ ai cũng biết tại sao BS4 quyết định không giao hàng với bộ Glyphicon Halflings? Chỉ để làm giảm gói?
twknab

6
"Cài đặt Ruby"?! Tại sao tôi chỉ cài đặt toàn bộ khung phát triển để sử dụng phông chữ?! Và tại sao bạn chỉ đề cập đến nó như là một lưu ý phụ? Đó là superhuge vì nó thay đổi ngữ nghĩa, xây dựng các quy trình và phụ thuộc của toàn bộ dự án của bạn chỉ để có được một phông chữ! Tôi không thể tin được làm thế nào bạn có thể khuyên làm điều đó.
Jens Mander

261

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

Bao gồm một tham chiếu đến Font Awesome (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 một tìm kiếm và thay thế nơi bạn tìm kiếm glyphicon glyphicon-và thay thế nó bằng fa fa-. Hầu hết các tên lớp CSS đều giống nhau. Một số đã thay đổi, vì vậy bạn phải tự sửa chúng.


27
Cách đơn giản để tích hợp mà không thay đổi. Cám ơn!
l.cotonea

1
Nguyên tắc KISS trong hành động!
Craig

7
Không phải tất cả các tên đều giống nhau. Đây là biểu tượng glyphicon ánh xạ thành phông chữ tuyệt vời: gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9
Grigory Kislin

1
Điều này đơn giản và đơn giản hơn nhiều so với câu trả lời được chấp nhận. Thanh danh!
luis.ap.uyen

6
fa fa-được khấu hao. Trang web của họ bây giờ nói fas fa-và thông báo này:The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.
James Wilkins

37

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 các biến sau:

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

Sau đó, bạn có thể chuyển đổi tệp .less thành tệp .css mà bạn có thể sử dụng trực tiếp. Bạn có thể làm điều này trực tuyến trên lesscss.org/less-preview/ . Ở đây tôi đã thực hiện nó cho bạn , lưu nó dưới dạng glyphicons.css và đưa nó vào các tệp HTML của bạn.

<link href="https://stackoverflow.com/Content/glyphicons.css" rel="stylesheet" />

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

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


Fred Cảm ơn bạn rất nhiều.
dùng3728517

Fred, cảm ơn bạn. Các biểu tượng đang hiển thị trong trình duyệt Firefox và Chrome. Nhưng trong IE, các Biểu tượng được hiển thị ở phiên bản 11.0.9600.19377 nhưng không phải ở phiên bản 11.0.9600.19356. Làm thế nào tôi có thể làm cho các biểu tượng để hiển thị trong phiên bản IE 11.0.9600.19356. Tôi cũng đã kiểm tra bảng điều khiển và không có lỗi trong phiên bản IE 11.0.9600.19356
Hemant

@Hemant, tôi không biết. Dù bằng cách nào, bài đăng này rất cũ và từ khi Glyphicons ở phiên bản 4. Hôm nay tôi sẽ đi đến phiên bản 5.
Fred

17

Nếu chỉ cần các lớp glyphicon trong CSS:

@font-face{font-family:'Glyphicons Halflings';src:url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot');src:url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff') format('woff'),url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');}.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;}
.glyphicon-asterisk:before{content:"\2a";}
.glyphicon-plus:before{content:"\2b";}
.glyphicon-euro:before{content:"\20ac";}
.glyphicon-minus:before{content:"\2212";}
.glyphicon-cloud:before{content:"\2601";}
.glyphicon-envelope:before{content:"\2709";}
.glyphicon-pencil:before{content:"\270f";}
.glyphicon-glass:before{content:"\e001";}
.glyphicon-music:before{content:"\e002";}
.glyphicon-search:before{content:"\e003";}
.glyphicon-heart:before{content:"\e005";}
.glyphicon-star:before{content:"\e006";}
.glyphicon-star-empty:before{content:"\e007";}
.glyphicon-user:before{content:"\e008";}
.glyphicon-film:before{content:"\e009";}
.glyphicon-th-large:before{content:"\e010";}
.glyphicon-th:before{content:"\e011";}
.glyphicon-th-list:before{content:"\e012";}
.glyphicon-ok:before{content:"\e013";}
.glyphicon-remove:before{content:"\e014";}
.glyphicon-zoom-in:before{content:"\e015";}
.glyphicon-zoom-out:before{content:"\e016";}
.glyphicon-off:before{content:"\e017";}
.glyphicon-signal:before{content:"\e018";}
.glyphicon-cog:before{content:"\e019";}
.glyphicon-trash:before{content:"\e020";}
.glyphicon-home:before{content:"\e021";}
.glyphicon-file:before{content:"\e022";}
.glyphicon-time:before{content:"\e023";}
.glyphicon-road:before{content:"\e024";}
.glyphicon-download-alt:before{content:"\e025";}
.glyphicon-download:before{content:"\e026";}
.glyphicon-upload:before{content:"\e027";}
.glyphicon-inbox:before{content:"\e028";}
.glyphicon-play-circle:before{content:"\e029";}
.glyphicon-repeat:before{content:"\e030";}
.glyphicon-refresh:before{content:"\e031";}
.glyphicon-list-alt:before{content:"\e032";}
.glyphicon-flag:before{content:"\e034";}
.glyphicon-headphones:before{content:"\e035";}
.glyphicon-volume-off:before{content:"\e036";}
.glyphicon-volume-down:before{content:"\e037";}
.glyphicon-volume-up:before{content:"\e038";}
.glyphicon-qrcode:before{content:"\e039";}
.glyphicon-barcode:before{content:"\e040";}
.glyphicon-tag:before{content:"\e041";}
.glyphicon-tags:before{content:"\e042";}
.glyphicon-book:before{content:"\e043";}
.glyphicon-print:before{content:"\e045";}
.glyphicon-font:before{content:"\e047";}
.glyphicon-bold:before{content:"\e048";}
.glyphicon-italic:before{content:"\e049";}
.glyphicon-text-height:before{content:"\e050";}
.glyphicon-text-width:before{content:"\e051";}
.glyphicon-align-left:before{content:"\e052";}
.glyphicon-align-center:before{content:"\e053";}
.glyphicon-align-right:before{content:"\e054";}
.glyphicon-align-justify:before{content:"\e055";}
.glyphicon-list:before{content:"\e056";}
.glyphicon-indent-left:before{content:"\e057";}
.glyphicon-indent-right:before{content:"\e058";}
.glyphicon-facetime-video:before{content:"\e059";}
.glyphicon-picture:before{content:"\e060";}
.glyphicon-map-marker:before{content:"\e062";}
.glyphicon-adjust:before{content:"\e063";}
.glyphicon-tint:before{content:"\e064";}
.glyphicon-edit:before{content:"\e065";}
.glyphicon-share:before{content:"\e066";}
.glyphicon-check:before{content:"\e067";}
.glyphicon-move:before{content:"\e068";}
.glyphicon-step-backward:before{content:"\e069";}
.glyphicon-fast-backward:before{content:"\e070";}
.glyphicon-backward:before{content:"\e071";}
.glyphicon-play:before{content:"\e072";}
.glyphicon-pause:before{content:"\e073";}
.glyphicon-stop:before{content:"\e074";}
.glyphicon-forward:before{content:"\e075";}
.glyphicon-fast-forward:before{content:"\e076";}
.glyphicon-step-forward:before{content:"\e077";}
.glyphicon-eject:before{content:"\e078";}
.glyphicon-chevron-left:before{content:"\e079";}
.glyphicon-chevron-right:before{content:"\e080";}
.glyphicon-plus-sign:before{content:"\e081";}
.glyphicon-minus-sign:before{content:"\e082";}
.glyphicon-remove-sign:before{content:"\e083";}
.glyphicon-ok-sign:before{content:"\e084";}
.glyphicon-question-sign:before{content:"\e085";}
.glyphicon-info-sign:before{content:"\e086";}
.glyphicon-screenshot:before{content:"\e087";}
.glyphicon-remove-circle:before{content:"\e088";}
.glyphicon-ok-circle:before{content:"\e089";}
.glyphicon-ban-circle:before{content:"\e090";}
.glyphicon-arrow-left:before{content:"\e091";}
.glyphicon-arrow-right:before{content:"\e092";}
.glyphicon-arrow-up:before{content:"\e093";}
.glyphicon-arrow-down:before{content:"\e094";}
.glyphicon-share-alt:before{content:"\e095";}
.glyphicon-resize-full:before{content:"\e096";}
.glyphicon-resize-small:before{content:"\e097";}
.glyphicon-exclamation-sign:before{content:"\e101";}
.glyphicon-gift:before{content:"\e102";}
.glyphicon-leaf:before{content:"\e103";}
.glyphicon-eye-open:before{content:"\e105";}
.glyphicon-eye-close:before{content:"\e106";}
.glyphicon-warning-sign:before{content:"\e107";}
.glyphicon-plane:before{content:"\e108";}
.glyphicon-random:before{content:"\e110";}
.glyphicon-comment:before{content:"\e111";}
.glyphicon-magnet:before{content:"\e112";}
.glyphicon-chevron-up:before{content:"\e113";}
.glyphicon-chevron-down:before{content:"\e114";}
.glyphicon-retweet:before{content:"\e115";}
.glyphicon-shopping-cart:before{content:"\e116";}
.glyphicon-folder-close:before{content:"\e117";}
.glyphicon-folder-open:before{content:"\e118";}
.glyphicon-resize-vertical:before{content:"\e119";}
.glyphicon-resize-horizontal:before{content:"\e120";}
.glyphicon-hdd:before{content:"\e121";}
.glyphicon-bullhorn:before{content:"\e122";}
.glyphicon-certificate:before{content:"\e124";}
.glyphicon-thumbs-up:before{content:"\e125";}
.glyphicon-thumbs-down:before{content:"\e126";}
.glyphicon-hand-right:before{content:"\e127";}
.glyphicon-hand-left:before{content:"\e128";}
.glyphicon-hand-up:before{content:"\e129";}
.glyphicon-hand-down:before{content:"\e130";}
.glyphicon-circle-arrow-right:before{content:"\e131";}
.glyphicon-circle-arrow-left:before{content:"\e132";}
.glyphicon-circle-arrow-up:before{content:"\e133";}
.glyphicon-circle-arrow-down:before{content:"\e134";}
.glyphicon-globe:before{content:"\e135";}
.glyphicon-tasks:before{content:"\e137";}
.glyphicon-filter:before{content:"\e138";}
.glyphicon-fullscreen:before{content:"\e140";}
.glyphicon-dashboard:before{content:"\e141";}
.glyphicon-heart-empty:before{content:"\e143";}
.glyphicon-link:before{content:"\e144";}
.glyphicon-phone:before{content:"\e145";}
.glyphicon-usd:before{content:"\e148";}
.glyphicon-gbp:before{content:"\e149";}
.glyphicon-sort:before{content:"\e150";}
.glyphicon-sort-by-alphabet:before{content:"\e151";}
.glyphicon-sort-by-alphabet-alt:before{content:"\e152";}
.glyphicon-sort-by-order:before{content:"\e153";}
.glyphicon-sort-by-order-alt:before{content:"\e154";}
.glyphicon-sort-by-attributes:before{content:"\e155";}
.glyphicon-sort-by-attributes-alt:before{content:"\e156";}
.glyphicon-unchecked:before{content:"\e157";}
.glyphicon-expand:before{content:"\e158";}
.glyphicon-collapse-down:before{content:"\e159";}
.glyphicon-collapse-up:before{content:"\e160";}
.glyphicon-log-in:before{content:"\e161";}
.glyphicon-flash:before{content:"\e162";}
.glyphicon-log-out:before{content:"\e163";}
.glyphicon-new-window:before{content:"\e164";}
.glyphicon-record:before{content:"\e165";}
.glyphicon-save:before{content:"\e166";}
.glyphicon-open:before{content:"\e167";}
.glyphicon-saved:before{content:"\e168";}
.glyphicon-import:before{content:"\e169";}
.glyphicon-export:before{content:"\e170";}
.glyphicon-send:before{content:"\e171";}
.glyphicon-floppy-disk:before{content:"\e172";}
.glyphicon-floppy-saved:before{content:"\e173";}
.glyphicon-floppy-remove:before{content:"\e174";}
.glyphicon-floppy-save:before{content:"\e175";}
.glyphicon-floppy-open:before{content:"\e176";}
.glyphicon-credit-card:before{content:"\e177";}
.glyphicon-transfer:before{content:"\e178";}
.glyphicon-cutlery:before{content:"\e179";}
.glyphicon-header:before{content:"\e180";}
.glyphicon-compressed:before{content:"\e181";}
.glyphicon-earphone:before{content:"\e182";}
.glyphicon-phone-alt:before{content:"\e183";}
.glyphicon-tower:before{content:"\e184";}
.glyphicon-stats:before{content:"\e185";}
.glyphicon-sd-video:before{content:"\e186";}
.glyphicon-hd-video:before{content:"\e187";}
.glyphicon-subtitles:before{content:"\e188";}
.glyphicon-sound-stereo:before{content:"\e189";}
.glyphicon-sound-dolby:before{content:"\e190";}
.glyphicon-sound-5-1:before{content:"\e191";}
.glyphicon-sound-6-1:before{content:"\e192";}
.glyphicon-sound-7-1:before{content:"\e193";}
.glyphicon-copyright-mark:before{content:"\e194";}
.glyphicon-registration-mark:before{content:"\e195";}
.glyphicon-cloud-download:before{content:"\e197";}
.glyphicon-cloud-upload:before{content:"\e198";}
.glyphicon-tree-conifer:before{content:"\e199";}
.glyphicon-tree-deciduous:before{content:"\e200";}
.glyphicon-briefcase:before{content:"\1f4bc";}
.glyphicon-calendar:before{content:"\1f4c5";}
.glyphicon-pushpin:before{content:"\1f4cc";}
.glyphicon-paperclip:before{content:"\1f4ce";}
.glyphicon-camera:before{content:"\1f4f7";}
.glyphicon-lock:before{content:"\1f512";}
.glyphicon-bell:before{content:"\1f514";}
.glyphicon-bookmark:before{content:"\1f516";}
.glyphicon-fire:before{content:"\1f525";}
.glyphicon-wrench:before{content:"\1f527";}


Làm việc như một điều trị cho tôi! Cảm ơn!
theshadow124


3

Đối với những người đang tìm kiếm giải pháp một lớp, bạn chỉ có thể nhập Bootstrap Glyphicons:

<link href="https://stackoverflow.com//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">

Phá vỡ rất nhiều thứ khác
Bob Claerhout

Tôi rất muốn biết thêm. @BobClaerhout
R. Gurung

2 điều tôi nhớ: thay đổi phông chữ và bootstrap datepicker ( bootstrap-datepicker.readthedocs.io/en/latest ) mất định dạng đẹp của nó
Bob Claerhout

2

Tổng quat:

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 phụ thuộc vào glyphicons. Tôi đang sử dụng treeview và tôi đang sử dụng scss @extend để dịch các kiểu lớp biểu tượng sang phông chữ các kiểu lớp tuyệt vời. Tôi nghĩ rằng điều này là 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 font-awesome không vì lý do nào tốt hơn tôi đã sử dụng nó trong quá khứ.

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

Tôi đã quyết định sử dụng tính năng scss @extend, để các lớp glyphicon sử dụng các lớp tuyệt vời về phông chữ như sau:

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

2

Nếu bạn đang sử dụng Laravel 5.6, nó đi kèm với Bootstrap 4. Tất cả những gì bạn cần là:

npm install and npm install open-iconic --save

Khi /resources/assets/sass/app.scssthay đổi dòng nhập phông chữ của Google trên dòng 2 thành

@import '~open-iconic/font/css/open-iconic-bootstrap';

Tất cả bạn cần làm bây giờ là

npm run watch

và bao gồm

<link rel="stylesheet" href="{{asset('css/app.css')}}">

trên đầu tập tin lưỡi chủ và <script src="{{asset('js/app.js')}}"></script>trước khi đóng thẻ cơ thể. Bạn sẽ nhận được Bootstrap 4 và biểu tượng.

Cách sử dụng là <span class="oi oi-cog"></span>

Tham khảo tại đây để biết chi tiết biểu tượng: Mở Iconic: Được giới thiệu bởi Bootstrap 4

Nếu trong dự án khác ngoài Laravel, bạn chỉ có thể nhập @import 'node_modules/open-iconic/font/css/open-iconic-bootstrap-min.css';vào tệp kiểu của mình.

Hi vọng điêu nay co ich. Hạnh phúc cố gắng.


Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.