Могу ли я добавить цвет в значки bootstrap только с помощью CSS?
bootstrap Twitter использует значки с помощью Глификонов. Они"available in dark gray and white
" по умолчанию:
можно ли использовать некоторые хитрости CSS для изменения цветов значков? Я надеялся на какой-то другой блеск css3, который предотвратит необходимость иметь набор иконок для каждого цвета.
Я знаю, что вы можете изменить цвет фона вшита (<i>
) элемент, но я говорю о цвете переднего плана значка. Думаю, так и будет. можно изменить прозрачность изображения значка, а затем установить цвет фона.
итак, могу ли я добавить цвет в значки начальной загрузки только с помощью CSS?
14 ответов
да, если вы используете Шрифт Удивительным С Bootstrap! Иконки немного отличаются, но их больше, они отлично смотрятся при любом размере, и вы можете менять их цвета.
в основном значки являются шрифтами, и вы можете изменить их цвет только с помощью свойства цвета CSS. Инструкции по интеграции находятся в нижней части страницы в предоставленной ссылке.
Edit: Bootstrap 3.0.0 иконки теперь шрифты!
как некоторые другие люди также упоминали с выпуском Bootstrap 3.0.0, по умолчанию символы теперь шрифты, такие как Font Awesome, и цвет может быть изменен просто путем изменения color
свойства CSS. Изменение размера можно сделать через font-size
собственность.
С последней версией Bootstrap RC 3 Изменение цвета значков так же просто, как добавление класса с нужным цветом и добавление его в диапазон.
по умолчанию черный цвет:
<h1>Password Changed <span class="glyphicon glyphicon-ok"></span></h1>
станет
<h1>Password Changed <span class="glyphicon glyphicon-ok icon-success"></span></h1>
в CSS
.icon-success {
color: #5CB85C;
}
потому что технологии glyphicons теперь шрифты можно использовать контекстная классы чтобы применить соответствующий цвет к значкам.
например:
<span class="glyphicon glyphicon-info-sign text-info"></span>
добавление text-info
для css сделает значок информации синего цвета.
другой возможный способ иметь значки начальной загрузки в другом цвете-создать новый.png в желаемом цвете, (например. magenta) и сохраните его как / path-to-bootstrap-css/img / glyphicons-halflings-пурпурный.формат PNG
в своем переменные.меньше найти
// Sprite icons path
// -------------------------
@iconSpritePath: "../img/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
и добавить эту строку
@iconMagentaSpritePath: "../img/glyphicons-halflings-magenta.png";
в своем спрайты.меньше добавить
/* Magenta icons with optional class, or on hover/active states of certain elements */
.icon-magenta,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
background-image: url("@{iconMagentaSpritePath}");
}
и используйте его так:
<i class='icon-chevron-down icon-magenta'></i>
надеюсь, это поможет кто-то.
быстрая и грязная работа, вокруг которой сделал это для меня, на самом деле не окрашивая значок, но окружая его ярлыком или значком в нужном цвете;
<span class="label-important label"><i class="icon-remove icon-white"></i></span>
<span class="label-success label"><i class="icon-ok icon-white"></i></span>
загрузчика технологии glyphicons-это шрифты. Это означает, что он может быть изменен как любой другой текст через CSS-стиль.
CSS:
<style>
.glyphicon-plus {
color: #F00;
}
</style>
HTML:
<span class="glyphicon glyphicon-plus"></span>
пример:
<!doctype html>
<html>
<head>
<title>Glyphicon Colors</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.glyphicon-plus {
color: #F00;
}
</style>
</head>
<body>
<span class="glyphicon glyphicon-plus"></span>
</body>
</html>
Смотреть курс и работает с Bootstrap 3 Джен Крамер, или смотреть индивидуальный урок на переопределение основного CSS с пользовательскими стилями.
Это все запутанно..
я использовал глифы, как это
</div>
<div class="span2">
<span class="glyphicons thumbs_up"><i class="green"></i></span>
</div>
<div class="span2">
<span class="glyphicons thumbs_down"><i class="red"></i></span>
</div>
и чтобы повлиять на цвет, я включил немного css в голове, как это
<style>
i.green:before {
color: green;
}
i.red:before {
color: red;
}
</style>
вуаля, зеленые и красные пальцы.
также работает с тегом style:
<span class="glyphicon glyphicon-ok" style="color:#00FF00;"></span>
<span class="glyphicon glyphicon-remove" style="color:#FF0000;"></span>
это на самом деле очень легко:
просто использовать:
.icon-name{
color: #0C0;}
например:
.icon-compass{
color: #C30;}
вот именно.
использовать mask-image
собственность, но это немного взломать. Это продемонстрировано в блоге Safari здесь.
это также описано в глубине здесь.
в основном вы создадите поле CSS, скажем,background-image: gradient(foo);
а затем примените к нему маску изображения на основе этих изображений PNG.
это сэкономит вам время разработки отдельных изображений в Photoshop, но я не думаю, что это сэкономит много пропускной способности, если вы не будете отображать изображения в самых разных цветах. Лично я бы не использовал его, потому что вам нужно настроить разметку, чтобы эффективно использовать технику, но я член школы "чистота-императив".
принятый ответ (с использованием шрифта awesome) является правильным. Но поскольку я просто хотел, чтобы красный вариант отображался на ошибках проверки, я закончил использование пакета аддона, любезно предложенного на этом сайте.
просто отредактировал url-пути в css-файлах, так как они абсолютны (начните с/), и я предпочитаю быть относительным. Вот так:
.icon-red {background-image: url("../img/glyphicons-halflings-red.png") !important;}
.icon-purple {background-image: url("../img/glyphicons-halflings-purple.png") !important;}
.icon-blue {background-image: url("../img/glyphicons-halflings-blue.png") !important;}
.icon-lightblue {background-image: url("../img/glyphicons-halflings-lightblue.png") !important;}
.icon-green {background-image: url("../img/glyphicons-halflings-green.png") !important;}
.icon-yellow {background-image: url("../img/glyphicons-halflings-yellow.png") !important;}
.icon-orange {background-image: url("../img/glyphicons-halflings-orange.png") !important;}
Я подумал, что могу добавить этот фрагмент к этому старому сообщению. Это то, что я делал в прошлом, прежде чем значки были шрифтами:
<i class="social-icon linkedin small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>
<i class="social-icon facebook small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>
это очень похоже на подлый ответ @frbl, но он не использует другое изображение. Вместо этого устанавливается цвет фона <i>
элемент white
и использует свойство CSS border-radius
сделать <i>
элемент "округлые.- Если вы заметили, то значение border-radius
(7.5 px) - это ровно половина от width
и height
свойство (оба 15px, делая квадрат значка), делая <i>
элемент круговой.
просто использовать технологии glyphicons и вы сможете изменить цвет, просто установив в CSS:
#myglyphcustom {
color:#F00;
}