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?
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?
Câu trả lời:
Bạn có thể sử dụng cả Font Awesome và Github 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:
/bootstrap
thư 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.gem install bundler
và 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
font-awesome/scss
thư mục vào thư mục / bootstrap của bạnMở SCSS của bạn /bootstrap/bootstrap.scss
và viết mã SCSS sau vào cuối tệp này:
$fa-font-path: "../fonts";
@import "../font-awesome/scss/font-awesome.scss";
Chú ý rằng bạn cũng phải sao chép các tập tin phông chữ từ font-awesome/fonts
phải dist/fonts
hoặc bất kỳ thiết lập thư mục công cộng khác do $fa-font-path
trong bước trước
npm run dist
để biên dịch lại mã của bạn với Font-AwesomeOctithons Github
octicons
thư mục vào /bootstrap
thư mục của bạnMở SCSS của bạn /bootstrap/bootstrap.scss
và viết mã SCSS sau vào cuối tệp này:
$fa-font-path: "../fonts";
@import "../octicons/octicons/octicons.scss";
Chú ý rằng bạn cũng phải sao chép các tập tin phông chữ từ font-awesome/fonts
phải dist/fonts
hoặc bất kỳ thiết lập thư mục công cộng khác do $fa-font-path
trong bước trước
npm run dist
để biên dịch lại mã của bạn với OcticonsGlyphicons
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.
bootstrap/scss
thư mục của bạn$bootstrap-sass-asset-helper: false;
$icon-font-name: 'glyphicons-halflings-regular';
$icon-font-svg-id: 'glyphicons_halflingsregular';
$icon-font-path: '../fonts/';
@import "glyphicons";
npm run dist
để biên dịch lại mã của bạn với GlyphiconsLư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-.scss
tệ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.
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.
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.
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.
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";}
Nó chưa được phát hành với bootstrap 4, nhưng bây giờ nhóm Bootstrap đang phát triển thư viện biểu tượng của họ.
Đố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">
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;
}
}
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.scss
thay đổ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.
Đi đến
https://github.com/Darkseal/bootstrap4-glyphicons
tải về và bao gồm trong mã của bạn
<link href="bootstrap4-glyphicons/css/bootstrap-glyphicons.css" rel="stylesheet">