Как изменить цвет иконки bootstrap

Badge (значки)

Документация и примеры значков, нашего небольшого количества и компонента маркировки.

Примеры

Значки масштабируются в соответствии с размером непосредственного родительского элемента с использованием относительного размера шрифта и em единиц измерения. Начиная с версии 5, значки больше не имеют стилей фокуса или наведения для ссылок.

Пример заголовка Новый

Значки можно использовать как часть ссылок или кнопок для счетчика.

Обратите внимание, что в зависимости от того, как они используются, значки могут сбивать с толку пользователей программ чтения с экрана и аналогичных вспомогательных технологий. Хотя стиль значков дает визуальную подсказку об их назначении, этим пользователям просто будет представлено содержимое значка. В зависимости от конкретной ситуации эти значки могут выглядеть как случайные дополнительные слова или числа в конце предложения, ссылки или кнопки.

Если контекст не ясен (как в примере «Уведомления», где подразумевается, что «4» — это количество уведомлений), рассмотрите возможность включения дополнительного контекста с визуально скрытым фрагментом дополнительного текста.

Цвет фона

Используйте наши фоновые служебные классы, чтобы быстро изменить внешний вид значка. Обратите внимание, что при использовании Bootstrap по умолчанию .bg-light вам, вероятно, понадобится утилита цвета текста, например, .text-dark для правильного стиля. Это потому, что фоновые утилиты не устанавливают ничего, кроме background-color .

Передача смысла вспомогательным технологиям

Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого контента (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с .sr-only классом.

Pill badges

Используйте .rounded-pill служебный класс, чтобы сделать значки более округлыми с помощью большего размера border-radius .

Разработан и построен с любовью к миру, командой Bootstrap и помощью наших участников.

В настоящее время v5.0.0-alpha1. Код под лицензией MIT, документы CC BY 3.0.

Источник

Bootstrap 3 — Иконки Glyphicons

В этой статье рассмотрим набор шрифтовых иконок, включённых в сборку Bootstrap 3.4.1 по умолчанию. Это набор включает более 250 иконок в формате шрифта из пакета Glyphicon Halflings.

Иконки Glyphicons

Фреймворк Bootstrap 3 включает в себя более 250 иконок в формате шрифта из набора Glyphicons Halflings . Библиотека Glyphicons Halflings не является бесплатной. Но разработчики этих иконок сделали некоторую часть из них доступной для использования в Bootstrap 3.

Четвёртая версия Bootstrap не включает никакие наборы иконок в формате шрифта в свою стандартную поставку. Если они вам нужны, то их придётся подключать самостоятельно.

Стандартные иконки Bootstrap 3 (из набора Glyphicon Halflings)

Как подключить иконки Glyphicons Halflings?

В стандартной сборке Bootstrap 3 иконки Glyphicons Halflings подключать не надо. Они и так уже подключены в файле CSS ( bootstrap.css или bootstrap.min.css ).

Находятся иконки Glyphicons Halflings в каталоге fonts . В данной директории находятся несколько форматов ( eot , svg , ttf , woff , woff2 ) одних и тех же иконок.

Формат eot необходим для отображения иконок в старых браузерах Microsoft Internet Explorer (до 9 версии). Шрифт в формате ttf используется для отображения иконок в устаревших браузерах операционной системы Android (до версии 4.4). woff и woff2 – это форматы, которые используют все основные браузеры. Вторая версия формата шрифта ( woff2 ) отличается от первой тем, что она имеет меньший размер. В настоящее время woff2 поддерживается браузерами Chrome 36+, Opera 26+, Firefox 35+. Шрифт в формате svg поддерживается только браузерами Safari (4.1 и ниже), работающими под управлением операционной системы iOS.

Если иконки Bootstrap отображаются у вас на странице квадратиками, то проверьте, правильно ли у вас расположены шрифты, относительно файла bootstrap.css по вышеприведённой схеме.

Как использовать стандартные иконки в Bootstrap 3?

Добавление иконки Bootstrap на веб-страницу обычно осуществляется с помощью элемента span или i , к которому необходимо добавить базовый класс glyphicon и класс определённой иконки (например, иконки телефона — glyphicon-earphone ).

Иконка телефона из набора Glyphicon Halflings

Стилизация иконок в Bootstrap 3

Оформление иконок Glyphicons Halflings осуществляется также как и стилизация обычного текста.

Например, для того чтобы изменить цвет иконки, ей необходимо просто задать CSS-свойство color .

Изменение размера иконки Glyphicon осуществляется с помощью CSS свойства font-size :

Добавление иконок Bootstrap к HTML-элементам

Помещение иконки «Звездочка» в кнопку выполняется следующим образом:

Не забудьте оставить место между значком и текстом, чтобы обеспечить необходимое расстояние. Например, посредством пробела или специсимвола .

Использование иконки Bootstrap в качестве маркера списка ul.

Чтобы это осуществить необходимо:

добавить класс icon к элементу ul ;
вставить на страницу фрагмент CSS кода.

Пример, как иконку можно поместить в элемент input:

Как подключить иконки Glyphicons к Bootstrap 4?

В Bootstrap 4 нет встроенных шрифтовых иконок. Если хотите в Bootstrap 4 использовать шрифтовые иконки Glyphicons, которые были в Bootstrap 3, то это можно сделать следующим образом.

Во-первых, загрузите папку «fonts» из Bootstrap 3 в Bootstrap 4. Скачать архив Bootstrap 3 можно используя эту ссылку.

Во-вторых, создайте файл, например, «font-glyphicons.css» и поместите в него следующее содержимое. Данные стили нужны для того, чтобы иконки можно было более просто и удобно вставлять на страницу.

В-третьих, подключить файл «font-glyphicons.css» к странице с помощью тега link.

После этого использовать иконки Glyphicons в Bootstrap 4 можно будет также как и в Bootstrap 3:

Источник

Я могу добавить цвет к бутстрап иконки только с помощью CSS?

Можно ли использовать некоторые CSS трюки, чтобы изменить цвета иконок? Я надеялся на некоторые другие CSS3 с блеском, что бы предотвратить необходимости иметь набор иконок изображения для каждого цвета.

Я знаю, что вы можете изменить цвет фона вшита ( ) элемент, но я’м говорить о значок цвет. Я думаю, можно было бы обратное прозрачности на изображение, а затем установить цвет фона.

Так, я могу добавить цвет к бутстрап иконки только с помощью CSS?

Я не’т так думаю. но вы, вероятно, может сделать это с помощью JavaScript и Canvas элемента.

@bfavaretto — вы можете остановиться? вы имеете в виду, придумывая код / координаты для рисования каждой иконки или используя как существующие изображения в формате PNG?

К сожалению, я’м не достаточно опытны в элемент canvas предложить вам код, но я знаю, что вы можете манипулировать пикселей индивидуально с холста.

14 ответов

Да, если вы используете шрифта с Bootstrap! Значки немного отличаются, но есть больше из них, они отлично смотрятся на любой размер, и вы можете изменить цвета их.

В основном иконки шрифты и вы можете изменить их цвета с цветом свойства CSS. Инструкция по интеграции внизу страницы по указанной ссылке.

Редактировать: в Bootstrap 3.0.0 иконки теперь шрифты!

Как и некоторые другие люди также упоминали с выходом на Bootstrap 3.0.0, по умолчанию глифы, значок сейчас шрифтов, как шрифт удивительным, и цвет можно изменить, просто изменив цвет свойства CSS. Изменение размера может быть сделано через размер шрифта собственность.

Аааа, умница! Дон’т забудьте установить курсор: по умолчанию;` поэтому клиенты Дон’т см. Я-бар. Кроме того, проверьте ФФ Чартвелл, очень умный шрифта: http://tktype.com/chartwell.php

При наведении указателя мыши над текстом (как в текстовом процессоре) курсор выглядит как большой столичный » Я символа», Это’s используемый для выбора текста. В CSS это’ы называют курсор: текст;`. Это’s также известен как «Я-Луч и».

С последней версией начальной загрузки РЦ 3, изменить цвет иконок так же просто, как добавление класса С цвет вы хотите, и добавить его в срок.

По умолчанию черный цвет:

Этот ответ заслуживает больше голосов за то, что намного практичнее и современным.

Поскольку технологии glyphicons теперь шрифты можно использовать Контекстная классов, чтобы применить соответствующий цвет к иконам.

Например: в добавив текст-информация к CSS будет сделать значок информации синего цвета.

Спасибо искал способ применить контекстную классов. Любой текст-* контекстная классов будет работать

Еще один возможный способ загрузки иконки в различные цвета, чтобы создать новый .PNG в нужный цвет (например. маджента) и сохранить его в качестве /путь-к-загрузки-ус/ИМГ/технологии glyphicons-полурослики-маджента.ПНГ

В переменные.меньше найти

и добавить эту строку

В спрайты.меньше добавить

И использовать его как это:

Надеюсь, что это помогает кто-то.

просто хотел подтвердить, я надеялся на некоторые другие CSS3 с блеском, что бы предотвратить необходимости иметь набор иконок изображения для каждого цвета`

Может’т быть сделано чисто через CSS, что это кросс-браузер совместимый тоже. Обычно людям нужен цветовой гамме с соответствующими значками — так что я бы сказал до 5 цветовых наборов, это’т, что гораздо сложнее.

@seppludger как создать новый цвет полурослик спрайт? У тебя это удалось? Я не могу изменить цвета, если я загрузить их в любом графическом редакторе.

Быстрая и грязную работу, который сделал это для меня, на самом деле не колорит иконы, но окружающие его с ярлыка или значка в цвет вы хотите;

Ваш ответ был полезен,+1.Я хотел использовать значок «редактировать» и хотите поместить желтый цвет. Можете вы пожалуйста сказать мне как это сделать?

Ну вы могли бы просто изменить значок-ОК на что-то другое; например, значок-белый» и> . Например: . Это лучше, чтобы перейти на новый бутстрап ИМО..

Загрузочный технологии glyphicons-это шрифты. Это означает, что он может быть изменен, как и любой другой текст с помощью CSS стилей.

Смотреть курс работает с Bootstrap 3 Джен Крамер, или посмотреть индивидуальное занятие на переопределение ядра CSS с пользовательские стили.

Также работает с тегом стиль:

Это все запутанно..

Я’вэ использовал глифы такой

и чтобы повлиять на цвет, я добавил немного CSS в голове, как это

Вуаля, зеленые и красные пальцы.

Это на самом деле очень легко:

Используйте маску-свойство изображения, но это’с хаком. Это’ы продемонстрировала в блоге сафари здесь.

Это’s также описано в-глубина здесь.

В общем, вы’D может создать поле CSS, причем говорят, что фон-изображения: градиент(ФОО); и затем применить изображение маски на основе этих изображений в формате PNG.

Это позволит сэкономить вам время на разработку индивидуального изображения в Photoshop, но я не’т думаю, что это позволит сэкономить много трафика, если вы не’ll быть отображение изображений в разных цветах. Лично я бы’т использовать его, потому что вам нужно настроить ваши разметки эффективно использовать эту технику, но я’м членом группы «чистота-это imperitive» в школе-по-думал.

Ницца — выглядит интересно! я попросил Усс плутовства

Имейте в виду поддержку для Маска-образ собственность разве’т, что Великая.

Источник

Как изменить цвет панели навигации в Bootstrap?

Цвет панели навигации можно изменить в Bootstrap двумя способами:

Метод 1: Использование встроенных классов цвета

Изменение цвета текста

Цвет текста панели навигации можно изменить с помощью двух встроенных классов:

navbar-light: этот класс устанавливает цвет текста на темный. Это используется при использовании светлого цвета фона.
navbar-dark: этот класс установит цвет текста на свет. Это используется при использовании темного фона.

Изменение цвета фона:

Bootstrap 4 имеет несколько встроенных классов для цветов любого фона. Их можно использовать для установки цвета фона панели навигации. Доступны следующие классы фона:

.bg-primary: устанавливает основной цвет.
.bg-second: устанавливает цвет вторичного цвета.
.bg-success: устанавливает цвет для успеха.
.bg-danger: устанавливает цвет опасности.
.bg-warning: устанавливает цвет предупреждения.
.bg-info: устанавливает цвет информационного цвета.
.bg-light: Устанавливает цвет на светлый.
.bg-dark: устанавливает темный цвет.
.bg-white: устанавливает белый цвет.
.bg-transparent: устанавливает прозрачность панели навигации.

Пример:

How to change navigation bar color in Bootstrap ?

Источник

Могу ли я добавить цвет в значки bootstrap только с помощью CSS?

bootstrap Twitter использует значки с помощью Глификонов. Они» available in dark gray and white » по умолчанию:

можно ли использовать некоторые хитрости CSS для изменения цветов значков? Я надеялся на какой-то другой блеск css3, который предотвратит необходимость иметь набор иконок для каждого цвета.

Я знаю, что вы можете изменить цвет фона вшита ( ) элемент, но я говорю о цвете переднего плана значка. Думаю, так и будет. можно изменить прозрачность изображения значка, а затем установить цвет фона.

итак, могу ли я добавить цвет в значки начальной загрузки только с помощью CSS?

14 ответов

да, если вы используете Шрифт Удивительным С Bootstrap! Иконки немного отличаются, но их больше, они отлично смотрятся при любом размере, и вы можете менять их цвета.

в основном значки являются шрифтами, и вы можете изменить их цвет только с помощью свойства цвета CSS. Инструкции по интеграции находятся в нижней части страницы в предоставленной ссылке.

Edit: Bootstrap 3.0.0 иконки теперь шрифты!

как некоторые другие люди также упоминали с выпуском Bootstrap 3.0.0, по умолчанию символы теперь шрифты, такие как Font Awesome, и цвет может быть изменен просто путем изменения color свойства CSS. Изменение размера можно сделать через font-size собственность.

С последней версией Bootstrap RC 3 Изменение цвета значков так же просто, как добавление класса с нужным цветом и добавление его в диапазон.

по умолчанию черный цвет:

потому что технологии glyphicons теперь шрифты можно использовать контекстная классы чтобы применить соответствующий цвет к значкам.

например: добавление text-info для css сделает значок информации синего цвета.

другой возможный способ иметь значки начальной загрузки в другом цвете-создать новый.png в желаемом цвете, (например. magenta) и сохраните его как / path-to-bootstrap-css/img / glyphicons-halflings-пурпурный.формат PNG

в своем переменные.меньше найти

и добавить эту строку

в своем спрайты.меньше добавить

и используйте его так:

надеюсь, это поможет кто-то.

быстрая и грязная работа, вокруг которой сделал это для меня, на самом деле не окрашивая значок, но окружая его ярлыком или значком в нужном цвете;

загрузчика технологии glyphicons-это шрифты. Это означает, что он может быть изменен как любой другой текст через CSS-стиль.

Источник