Запуск 4 - міграція гліфіконів?


317

У нас є проект, який інтенсивно використовує гліфікони. Bootstrap v4 повністю знижує шрифт гліфікону.

Чи існує еквівалент піктограм, що постачаються з Bootstrap V4?

Журнал змін

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


15
Ви все ще можете використовувати гліфікони , вони просто більше не будуть поставлятися із завантажувальним завантаженням. Якщо у вас є проблема з ліцензією , ви можете перевірити дивовижні значки шрифту .
Холт

1
Я вважаю, що вам доведеться заплатити за використання шрифту. Я відредагував питання, щоб уточнити.
Вінсент Поарьє

Існує безкоштовна ліцензія, де вам потрібно покласти посилання на гліфікони (див. Розділ GLYPHICON FREE в моєму попередньому посиланні). Як я вже говорив у своєму попередньому коментарі, є такі альтернативи, як шрифт awesome, який є відкритим кодом та безкоштовним, але знати, який з них найкращий, явно буде базуватися на думці ...
Холт

Це було б чудово, але безкоштовний пакет не пропонує шрифту, лише файли PNG. Мабуть, лише пакет PRO включає всі піктограми як веб-шрифт . Хоча вам дуже корисно (дякую), питання стосується детальніше включених компонентів у Bootstrap, якщо ви можете підтвердити, що жодні піктограми будь-якого типу не включаються (або будуть) включені до v4, ви можете генерувати відповідь.
Вінсент Пуарьє

Якщо ви перейдете за наданим посиланням fontawesome.io, вам буде запропоновано платити в розмірі 60 або 99 доларів, якщо ви зачекаєте занадто багато, так що я вважаю, що джерело не більше безкоштовне.
Густаво Родрігес

Відповіді:


269

Можна використовувати і те, і інше Font Awesome, так і Github Octicons як безкоштовну альтернативу Glyphicons.

Bootstrap 4 також перейшов з "Менше" на "Sass", щоб ви могли інтегрувати Sass шрифту (SCSS) у свій процес збирання, щоб створити єдиний CSS-файл для своїх проектів.

Також див Https://getbootstrap.com/docs/4.1/getting-started/build-tools/, щоб дізнатися, як налаштувати інструменти:

  1. Завантажте та встановіть Node, який ми використовуємо для управління нашими залежностями.
  2. Перейдіть до кореня /bootstrap каталогу та запустіть npm installдля встановлення наших локальних залежностей, перелічених у package.json.
  3. Встановіть Ruby, встановіть Bundler за допомогою gem install bundler і, нарешті, запустіть bundle install. Це дозволить встановити всі залежності Ruby, такі як Jekyll та плагіни.

Шрифт Awesome

  1. Завантажте файли за адресою веб-сторінці https://github.com/FortAwesome/Font-Awesome/tree/fa-4
  2. Скопіюйте font-awesome/scss папку у папку / bootstrap
  3. Відкрийте свій SCSS /bootstrap/bootstrap.scssі запишіть наступний код SCSS в кінці цього файлу:

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

  4. Зауважте, що вам також потрібно скопіювати файл шрифту з font-awesome/fontsуdist/fonts або будь-якого іншого набору загальних папок з допомогою $fa-font-pathв попередньому кроці

  5. Виконати: npm run dist перекомпілювати код з Font-Awesome

Github Octicons

  1. Завантажте файли за адресою веб-сторінці https://github.com/github/octicons/
  2. Скопіюйте octicons папку у свою /bootstrapпапку
  3. Відкрийте свій SCSS /bootstrap/bootstrap.scssі запишіть наступний код SCSS в кінці цього файлу:

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

  4. Зауважте, що вам також потрібно скопіювати файл шрифту з font-awesome/fontsуdist/fonts або будь-якого іншого набору загальних папок з допомогою $fa-font-pathв попередньому кроці

  5. Виконати: npm run dist перекомпілювати код з Octicons

Гліфікони

На веб-сайті Bootstrap можна прочитати:

В комплект входить понад 250 гліфів у форматі шрифту з набору Glyphicon Halflings. Гліфікони Halflings, як правило, не доступні безкоштовно, але їх автор створив їх безкоштовно для Bootstrap. Як подяку, ми просимо лише включити посилання на Гліфікони, коли це можливо.

Як я розумію, ви можете використовувати ці 250 гліфів безкоштовно з обмеженими витратами на Bootstrap, але не обмежуючись лише версією 3. Таким чином, ви можете використовувати їх і для Bootstrap 4.

  1. Скопіюйте файли шрифтів з: https://github.com/twbs/bootstrap-sass/tree/master/assets/fonts/bootstrap
  2. Скопіюйте https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_glyphicons.scss файл у свійbootstrap/scss папку
  3. Відкрийте свій scss /bootstrap/bootstrap.scss і в кінці цього файлу запишіть наступний код SCSS:
$bootstrap-sass-asset-helper: false;
$icon-font-name: 'glyphicons-halflings-regular';
$icon-font-svg-id: 'glyphicons_halflingsregular';
$icon-font-path: '../fonts/';
@import "glyphicons";
  1. Виконати: 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.


4
Це було дуже ретельно і дійсно допомогло прояснити речі для мене і вказати на правильний напрямок мого вибору. Хтось знає, чому BS4 вирішив не поставлятися з набором Glyphicon Halflings? Просто, щоб скинути пакет?
twknab

6
"Встановити Ruby" ?! Навіщо мені встановлювати цілі рамки розробки лише для використання шрифту ?! І як це ти просто згадуєш про це як бічну записку? Це надмірно, оскільки він змінює семантику, будує процеси та залежності всього вашого проекту лише для того, щоб дійти до шрифту! Мені незбагненно, як можна порадити це робити.
Єнс Мандер

261

Міграція з гліфіконів на дивовижний шрифт досить проста.

Додайте посилання на шрифт 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 однакові. Деякі змінилися, однак їх доведеться виправити вручну.


27
Простий спосіб інтеграції без змін. Дякую!
l.cotonea

1
Принцип KISS в дії!
Крейг

7
Не всі імена однакові. Це піктограми гліфікону на карті для приготування шрифту: gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9
Григорій

1
Це набагато простіше і простіше, ніж прийнята відповідь. Кудо!
luis.ap.uyen

6
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.
Джеймс Вілкінс

37

Файл 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, як зазвичай.


Фред Дуже дякую.
користувач3728517

Фред, дякую. Значки відображаються в браузерах Firefox та Chrome. Але в IE значки відображаються у версії 11.0.9600.19377, але не у версії 11.0.9600.19356. Як я можу зробити так, щоб піктограми відображалися у версії IE 11.0.9600.19356. Я також перевірив консоль і немає помилок у версії IE 11.0.9600.19356
Hemant

@Hemant, я не знаю. Так чи інакше, цей пост дуже старий і з тих пір, коли Glyphicons був у версії 4. Сьогодні я пішов би на версію 5.
Фред

17

Якщо вам потрібні лише гліфіконові класи в 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";}


Працювало, як частування для мене! Дякую!
theshadow124


3

Для людей, які шукають однолінійні рішення, ви можете імпортувати лише гліфікони Bootstrap:

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

Порушує багато іншого
Боб

Я хотів би знати більше. @BobClaerhout
Р. Гурунг

2 речі, які я пам’ятаю: зміна шрифту та
Bob

2

Огляд:

Я використовую завантажувальний інструмент 4 без гліфіконів. Я виявив проблему з переглядом дерев завантажувальної машини, що залежить від гліфіконів. Я використовую перегляд дерева так, як є, і я використовую scss @extend для перекладу стилів класу значків у шрифтові стилі класу. Я думаю, що це досить хитро (якщо ви запитаєте мене)!

Деталі:

Я використовував scss @extend, щоб обробити це для мене.

Раніше я вирішив використовувати шрифтовий дивовижний без жодної кращої причини, ніж раніше.

Коли я пішов спробувати bootstrap treeview, я виявив, що піктограми відсутні, оскільки в мене не було встановлено гліфіконів.

Я вирішив скористатися функцією scss @extend, щоб класи гліфікону використовували дивовижні класи шрифту так:

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

2

Якщо ви використовуєте 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';файл вашого стилю.

Сподіваюсь, це допомагає. Щасливі спроби.


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.