У нас есть проект, который интенсивно использует глификоны. Bootstrap v4 полностью удаляет глифический шрифт.
Есть ли эквивалент для иконок, поставляемых с Bootstrap V4?
bootstrap-4
glyphicons
Винсент Пуарье
источник
источник
Ответы:
Вы можете использовать Font Awesome и Github Octicons в качестве бесплатной альтернативы для Glyphicons.
Bootstrap 4 также переключился с Less на 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 и плагины.Font 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
перекомпилировать ваш код с OcticonsGlyphicons
На сайте Bootstrap вы можете прочитать:
Как я понимаю, вы можете использовать эти 250 символов бесплатно для Bootstrap, но не ограничиваясь только версией 3. Таким образом, вы можете использовать их для Bootstrap 4 тоже.
bootstrap/scss
папку.npm run dist
перекомпилировать ваш код с GlyphiconsОбратите внимание, что для компоновки Bootstrap 4 требуется постопрефиксатор 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, возможно, не поддерживается в старых браузерах). Так что подумайте, какое решение лучше всего подходит для вашей ситуации, в зависимости от поддерживаемых браузеров.
Для Font Awesome вставьте следующий код в
<head>
раздел HTML вашего сайта:Также попробуйте Yeoman Generator для создания внешнего веб-приложения Bootstrap 4 для тестирования Bootstrap 4 с Font Awesome или Github Octicons.
источник
Переход с Glyphicons на Font Awesome довольно прост.
Включите ссылку на Font Awesome (либо локально, либо используйте CDN).
Затем запустите поиск и замените место поиска
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
Ему нужны эти переменные:
Затем вы можете преобразовать файл .less в файл .css, который вы можете использовать напрямую. Вы можете сделать это онлайн на lesscss.org/less-preview/ . Здесь я сделал это для вас , сохраните его как glyphicons.css и включите в свои HTML-файлы.
Вам также понадобятся шрифты Glyphicon, входящие в пакет Bootstrap 3, поместите их в каталог / fonts /.
Теперь вы можете просто продолжать использовать Glyphicons с Bootstrap 4 как обычно.
источник
Если нужны только классы глификона в CSS:
источник
Он пока не поставляется с Bootstrap 4, но теперь команда Bootstrap разрабатывает свою библиотеку иконок.
https://icons.getbootstrap.com/
https://github.com/twbs/icons
источник
Для людей, которые ищут однострочные решения, вы можете импортировать только Bootstrap Glyphicons:
источник
Обзор:
Я использую Bootstrap 4 без глифов. Я обнаружил проблему с деревом начальной загрузки, которое зависит от глифов. Я использую древовидную структуру как есть, и я использую scss @extend для перевода стилей классов значков в шрифтовые классные стили. Я думаю, что это довольно гладко (если вы спросите меня)!
Подробности:
Я использовал scss @extend, чтобы справиться с этим для меня.
Ранее я решил использовать font-awesome не по лучшей причине, чем в прошлом.
Когда я пошел, чтобы попробовать просмотр дерева начальной загрузки, я обнаружил, что иконки отсутствуют, потому что у меня не было установленных глификонов.
Я решил использовать функцию scss @extend, чтобы классы глифов использовали классы font-awesome следующим образом:
источник
Если вы используете Laravel 5.6, он поставляется с Bootstrap 4. Все, что вам нужно, это:
При
/resources/assets/sass/app.scss
изменении строки импорта шрифта Google в строке 2 наВсе, что вам нужно сделать сейчас, это
и включать
поверх главного файла блейда и
<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
скачать и включить в свой код
источник