Bootstrap 4 – миграция глификонов?

У нас есть проект, который интенсивно использует глификоны. Bootstrap v4 полностью отбрасывает шрифт глификона.

Есть ли эквивалент для значков, поставляемых с Bootstrap V4?

Изменения

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

    Вы можете использовать оба шрифта Awesome и Github Octicons в качестве бесплатной альтернативы для Glyphicons.

    Bootstrap 4 также переключился с Less на Sass, чтобы вы могли интегрировать Sass (SCSS) шрифта в процесс сборки, чтобы создать один файл CSS для ваших проектов.

    Также см. https://getbootstrap.com/docs/4.1/getting-started/build-tools/, чтобы узнать, как настроить инструмент:

    1. Загрузите и установите узел, который мы используем для управления нашими зависимостями.
    2. Перейдите в каталог root /bootstrap и запустите npm install для установки наших локальных зависимостей, перечисленных в package.json.
    3. Установите Ruby, установите Bundler с bundle install 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. Run: npm run dist чтобы перекомпилировать ваш код с помощью Font-Awesome

    Гиктиб-Октикон

    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. Run: npm run dist чтобы перекомпилировать ваш код с помощью Octicons

    Glyphicons

    На сайте Bootstrap вы можете прочитать:

    Включает более 250 символов в формате шрифта из набора Glyphicon Halflings. Глификоны Халфлинги обычно недоступны бесплатно, но их создатель сделал их доступными для Bootstrap бесплатно. Благодарю вас, мы только просим вас включить ссылку на Glyphicons, когда это возможно.

    Насколько я понимаю, вы можете использовать эти 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";

    4. Run: npm run dist чтобы перекомпилировать ваш код с помощью Glyphicons


    Обратите внимание, что для Bootstrap 4 требуется компиляция PostScript Autoprefixer . Когда вы используете статический компилятор 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 также include файлы шрифтов (с использованием данных-uri, возможно не поддерживаемых для старых браузеров). Поэтому рассмотрите, какое решение лучше всего подходит для вашей ситуации, в зависимости от того, какие браузеры поддерживают.

    Для шрифта Awesome вставьте следующий код в раздел HTML вашего сайта:

      

    Кроме того, попробуйте генератор Yeoman, чтобы выставить внешнее приложение Bootstrap 4 Web для тестирования Bootstrap 4 с помощью шрифта Awesome или Gitub Octicons.

    Миграция с Glyphicons на Font Awesome довольно проста.

    Включите ссылку на шрифт Awesome (либо локально, либо используйте CDN).

      

    Затем запустите поиск и замените там, где вы glyphicon glyphicon- и замените его fa fa- . Большинство имен classов CSS одинаковы. Некоторые из них изменились, поэтому вы должны их вручную исправить.

    Файл 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, который вы можете использовать напрямую. Вы можете сделать это онлайн на less2css.org . Здесь я сделал это для вас , сохранил его как glyphicons.css и включил в ваши файлы HTML.

      

    Вам также нужны шрифты Glyphicon, которые находятся в пакете Bootstrap 3, поместите их в каталог / fonts /.

    Теперь вы можете просто использовать Glyphicons с Bootstrap 4, как обычно.

    Обзор:

    Я использую bootstrap 4 без глификонов. Я нашел проблему с деревом bootstrap, которое зависит от глификонов. Я использую treeview как есть, и я использую scss @extend для перевода стилей classа значков шрифтов в classные стили classов. Я думаю, что это довольно скользкий (если вы спросите меня)!

    Детали:

    Я использовал scss @extend, чтобы обработать его для меня.

    Я ранее решил использовать шрифт-awesome по лучшей причине, чем я использовал его в прошлом.

    Когда я пошел, чтобы попробовать bootstrap treeview, я обнаружил, что значки отсутствовали, потому что у меня не было установленных глифов.

    Я решил использовать функцию scss @extend, чтобы classы глификона использовали class-awesome-classы так:

     .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 

    и include

      

    поверх файла основного лезвия и перед закрытием тега body. Вы получите Bootstrap 4 и значок.

    Использование

    См. Здесь информацию о значке: Open Iconic: Рекомендован Bootstrap 4

    Если в другом проекте, кроме Laravel, вы можете просто импортировать @import 'node_modules/open-iconic/font/css/open-iconic-bootstrap-min.css'; в вашем файле стиля.

    Надеюсь это поможет. Счастливые попытки.

    Если вы ищете способ перекрестного ссылки на бутстрап 3 глификонов со значками шрифта Awesome, я создал ссылку pdf.

    введите описание изображения здесь

    Вы можете получить его здесь: https://bootstrapcreative.com/shop/bootstrap-quick-start/font-awesome-glyphicons-comparison-cheat-sheet/

    Давайте будем гением компьютера.