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

Twitter bootstrap использует иконки Glyphicons. По умолчанию они "available in dark gray and white":

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

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

Итак, могу ли я добавить цвет для значков начальной загрузки только с помощью 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

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

Например:  добавление 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>

Ответ 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 ответ, но он не использует другое изображение. Вместо этого он устанавливает фоновый цвет элемента  в white и использует свойство CSS border-radius, чтобы весь элемент  "округлялся". Если вы заметили, значение border-radius (7.5px) будет в точности вдвое меньше значения свойства width и height (оба 15px, что делает квадрат значка), делая элемент  круглым.