Могу ли я добавлять цвета к значкам начальной загрузки только с помощью CSS?
Twitter bootstrap использует иконки Glyphicons. По умолчанию они "available in dark gray and white":
![Picture-58.png]()
Можно ли использовать CSS-обман для изменения цветов значков? Я надеялся на какой-то другой блеск css3, который помешал бы иметь изображение значка, установленное для каждого цвета.
Я знаю, что вы можете изменить цвет фона входящего (<i>) элемента, но я говорю о значке цвета переднего плана. Я думаю, можно было бы отменить прозрачность изображения значка, а затем установить цвет фона.
Итак, могу ли я добавить цвет для значков начальной загрузки только с помощью CSS?
Ответы
Ответ 1
Да, если вы используете Шрифт Awesome с Bootstrap! Значки немного отличаются, но их больше, они отлично смотрятся на любом размере, и вы можете изменить их цвета.
В основном значки - это шрифты, и вы можете изменить их цвет только с помощью свойства цвета CSS. Инструкции по интеграции находятся в нижней части страницы в предоставленной ссылке.
Изменить: Значки Bootstrap 3.0.0 теперь являются шрифтами!
Как отмечали некоторые другие люди с выпуском Bootstrap 3.0.0, значки по умолчанию теперь являются шрифтами, такими как Font Awesome и цвет можно изменить, просто изменив свойство color CSS. Изменение размера может быть выполнено с помощью свойства font-size.
Ответ 2
С последней версией 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;
}
Bootstrap 3 Список глификов
Ответ 3
Поскольку глификоны теперь являются шрифтами, можно использовать контекстные классы, чтобы применить соответствующий цвет к значкам.
Например:
<span class="glyphicon glyphicon-info-sign text-info"></span>
добавление text-info в css сделает значок синим цветом.
Ответ 4
Еще один возможный способ иметь значки начальной загрузки в другом цвете - создать новый .png в нужном цвете (например, пурпурный) и сохранить его как /path -to-bootstrap-css/img/glyphicons-halflings- пурпурного.png
В variable.less найдите
// Sprite icons path
// -------------------------
@iconSpritePath: "../img/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
и добавьте эту строку
@iconMagentaSpritePath: "../img/glyphicons-halflings-magenta.png";
В sprites.less добавьте
/* 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>
Надеюсь, что это поможет кому-то.
Ответ 5
Быстрая и грязная работа вокруг, которая сделала это для меня, не на самом деле окрашивая значок, но окружая его ярлыком или значком в нужном вам цвете;
<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>
Ответ 6
Глификоны Bootstrap - это шрифты. Это означает, что он может быть изменен, как и любой другой текст, с помощью стилей 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>
Следите за курсом Up и Run with Bootstrap 3 от Jen Kramer или смотрите индивидуальный урок на Переопределение основного CSS с пользовательскими стилями.
Ответ 7
Все это немного круто.
Я использовал глифы вроде этого
</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>
Воила, зеленые и красные превью.
Ответ 8
Используйте свойство mask-image, но это немного взломает. Это продемонстрировано в блоге Safari здесь.
Он также подробно описал здесь.
В принципе, вы должны создать поле CSS, скажем, background-image: gradient(foo);, а затем применить к нему маску изображения на основе этих изображений PNG.
Это избавит вас от времени разработки отдельных изображений в Photoshop, но я не думаю, что он сэкономил бы большую пропускную способность, если вы не будете отображать изображения в самых разных цветах. Лично я бы не использовал его, потому что вам нужно настроить свою разметку, чтобы эффективно использовать технику, но я являюсь участником "чистоты, является императивной" школой мысли.
Ответ 9
На самом деле это очень просто:
просто используйте:
.icon-name{
color: #0C0;}
Например:
.icon-compass{
color: #C30;}
Что это.
Ответ 10
Также работает с тегом стиля:
<span class="glyphicon glyphicon-ok" style="color:#00FF00;"></span>
<span class="glyphicon glyphicon-remove" style="color:#FF0000;"></span>
![enter image description here]()
Ответ 11
Принятый ответ (с использованием шрифта 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;}
Ответ 12
Вы также можете изменить цвет по всему миру
то есть.
.glyphicon {
color: #008cba;
}
Ответ 13
Просто используйте GLYPHICONS, и вы сможете изменить цвет, просто установив CSS:
#myglyphcustom {
color:#F00;
}
Ответ 14
Я думал, что могу добавить этот фрагмент к этому старому сообщению.
Это то, что я делал в прошлом, до того, как значки были шрифтами:
<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 sneaky ответ, но он не использует другое изображение. Вместо этого он устанавливает фоновый цвет элемента <i> в white и использует свойство CSS border-radius, чтобы весь элемент <i> "округлялся". Если вы заметили, значение border-radius (7.5px) будет в точности вдвое меньше значения свойства width и height (оба 15px, что делает квадрат значка), делая элемент <i> круглым.
