У нас є проект, який інтенсивно використовує гліфікони. Bootstrap v4 повністю знижує шрифт гліфікону.
Чи існує еквівалент піктограм, що постачаються з Bootstrap V4?
У нас є проект, який інтенсивно використовує гліфікони. Bootstrap v4 повністю знижує шрифт гліфікону.
Чи існує еквівалент піктограм, що постачаються з Bootstrap V4?
Відповіді:
Можна використовувати і те, і інше Font Awesome, так і Github Octicons як безкоштовну альтернативу Glyphicons.
Bootstrap 4 також перейшов з "Менше" на "Sass", щоб ви могли інтегрувати Sass шрифту (SCSS) у свій процес збирання, щоб створити єдиний CSS-файл для своїх проектів.
Також див Https://getbootstrap.com/docs/4.1/getting-started/build-tools/, щоб дізнатися, як налаштувати інструменти:
/bootstrap
каталогу та запустіть npm install
для встановлення наших локальних залежностей, перелічених у package.json.gem install bundler
і, нарешті, запустіть bundle install
. Це дозволить встановити всі залежності Ruby, такі як Jekyll та плагіни.Шрифт Awesome
font-awesome/scss
папку у папку / bootstrapВідкрийте свій SCSS /bootstrap/bootstrap.scss
і запишіть наступний код SCSS в кінці цього файлу:
$fa-font-path: "../fonts";
@import "../font-awesome/scss/font-awesome.scss";
Зауважте, що вам також потрібно скопіювати файл шрифту з font-awesome/fonts
уdist/fonts
або будь-якого іншого набору загальних папок з допомогою $fa-font-path
в попередньому кроці
npm run dist
перекомпілювати код з Font-AwesomeGithub Octicons
octicons
папку у свою /bootstrap
папкуВідкрийте свій SCSS /bootstrap/bootstrap.scss
і запишіть наступний код SCSS в кінці цього файлу:
$fa-font-path: "../fonts";
@import "../octicons/octicons/octicons.scss";
Зауважте, що вам також потрібно скопіювати файл шрифту з font-awesome/fonts
уdist/fonts
або будь-якого іншого набору загальних папок з допомогою $fa-font-path
в попередньому кроці
npm run dist
перекомпілювати код з OcticonsГліфікони
На веб-сайті Bootstrap можна прочитати:
В комплект входить понад 250 гліфів у форматі шрифту з набору Glyphicon Halflings. Гліфікони Halflings, як правило, не доступні безкоштовно, але їх автор створив їх безкоштовно для Bootstrap. Як подяку, ми просимо лише включити посилання на Гліфікони, коли це можливо.
Як я розумію, ви можете використовувати ці 250 гліфів безкоштовно з обмеженими витратами на Bootstrap, але не обмежуючись лише версією 3. Таким чином, ви можете використовувати їх і для Bootstrap 4.
bootstrap/scss
папку$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
перекомпілювати код з GlyphiconsЗауважте, що для завантаження 4 для компіляції потрібен Autoprefixer після CSS . Коли ви використовуєте статичний компілятор Sass для складання CSS, вам доведеться після цього запустити Autoprefixer.
Більше про змішування з Bootstrap 4 SCSS можна дізнатися тут .
Ви також можете використовувати Bower для встановлення вищевказаних шрифтів. Використання Bower Font Awesome встановлює ваші файли, bower_components/components-font-awesome/
також зауважте, що Github Octicons встановлює octicons/octicons/octicons-.scss
основний файл при використанні octicons/octicons/sprockets-octicons.scss
.
Все вищезгадане буде складати весь ваш CSS-код, включаючи в один файл, для якого потрібен лише один HTTP-запит. Крім того, ви можете також завантажити шрифт Font-Awesome з CDN, що може бути занадто швидким у багатьох ситуаціях. Обидва шрифти на CDN також містять файли шрифтів (використовуючи data-uri, можливо, не підтримується для старих браузерів). Тож розглянемо, яке рішення найкраще відповідає вашій ситуації залежно від інших браузерів, які вони підтримують.
Для шрифту Awesome вставте наступний код у <head>
розділ HTML вашого сайту:
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Також спробуйте генератор Yeoman, щоб поставити передній веб-додаток Bootstrap 4 для тестування Bootstrap 4 за допомогою Awesome Font або Github Octicons.
Міграція з гліфіконів на дивовижний шрифт досить проста.
Додайте посилання на шрифт Awesome (або локально, або використовуйте CDN).
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Потім запустіть пошук і замініть там, де ви шукаєте, glyphicon glyphicon-
і замініть його fa fa-
. Більшість назв класів CSS однакові. Деякі змінилися, однак їх доведеться виправити вручну.
fa fa-
амортизується. Зараз на їхньому веб-сайті написано fas fa-
таке повідомлення:The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.
Файл glyphicons.less з Bootstrap 3 доступний на GitHub. https://github.com/twbs/bootstrap/blob/master/less/glyphicons.less
Для цього потрібні такі змінні:
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
@icon-font-svg-id: "glyphicons_halflingsregular";
Тоді ви можете конвертувати .less файл у .css файл, який ви можете використовувати безпосередньо. Це можна зробити в Інтернеті на електронному сайті lesscss.org/less-preview/ . Ось я це зробив для вас , збережіть його як glyphicons.css і включіть його у свої HTML-файли.
<link href="https://stackoverflow.com/Content/glyphicons.css" rel="stylesheet" />
Вам також потрібні шрифти Glyphicon, які є в пакеті Bootstrap 3, помістіть їх у каталог / fonts /.
Тепер ви можете просто продовжувати використовувати Glyphicons з Bootstrap 4, як зазвичай.
Якщо вам потрібні лише гліфіконові класи в 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";}
Він ще не поставляється з завантажувальним пристроєм 4, але зараз команда Bootstrap розробляє свою бібліотеку іконок.
Для людей, які шукають однолінійні рішення, ви можете імпортувати лише гліфікони Bootstrap:
<link href="https://stackoverflow.com//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
Огляд:
Я використовую завантажувальний інструмент 4 без гліфіконів. Я виявив проблему з переглядом дерев завантажувальної машини, що залежить від гліфіконів. Я використовую перегляд дерева так, як є, і я використовую scss @extend для перекладу стилів класу значків у шрифтові стилі класу. Я думаю, що це досить хитро (якщо ви запитаєте мене)!
Деталі:
Я використовував scss @extend, щоб обробити це для мене.
Раніше я вирішив використовувати шрифтовий дивовижний без жодної кращої причини, ніж раніше.
Коли я пішов спробувати bootstrap treeview, я виявив, що піктограми відсутні, оскільки в мене не було встановлено гліфіконів.
Я вирішив скористатися функцією scss @extend, щоб класи гліфікону використовували дивовижні класи шрифту так:
.treeview {
.glyphicon {
@extend .fa;
}
.glyphicon-minus {
@extend .fa-minus;
}
.glyphicon-plus {
@extend .fa-plus;
}
}
Якщо ви використовуєте Laravel 5.6, він постачається з Bootstrap 4. Все, що вам потрібно:
npm install and npm install open-iconic --save
При /resources/assets/sass/app.scss
зміні рядка імпорту шрифту Google на рядок 2 на
@import '~open-iconic/font/css/open-iconic-bootstrap';
Все, що вам потрібно зробити зараз, - це
npm run watch
і включати
<link rel="stylesheet" href="{{asset('css/app.css')}}">
поверх файлу головного леза і <script src="{{asset('js/app.js')}}"></script>
перед закриттям тега body. Ви отримаєте Bootstrap 4 та значок.
Використання є <span class="oi oi-cog"></span>
Тут ви знайдете детальну інформацію про піктограму: Open Iconic: Рекомендовано Bootstrap 4
Якщо в іншому проекті, ніж Laravel, ви можете просто імпортувати @import 'node_modules/open-iconic/font/css/open-iconic-bootstrap-min.css';
файл вашого стилю.
Сподіваюсь, це допомагає. Щасливі спроби.
Йти до
https://github.com/Darkseal/bootstrap4-glyphicons
завантажте і включіть у свій код
<link href="bootstrap4-glyphicons/css/bootstrap-glyphicons.css" rel="stylesheet">