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

159

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

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

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

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

css twitter-bootstrap sprite css-sprites УХО
источник

Я так не думаю ... Но вы могли бы сделать это с помощью javascript и элемента canvas.

bfavaretto

@bfavaretto - можешь уточнить? Вы имеете в виду придумывать код / координаты для рисования каждой иконки или как-то использовать существующее изображение в формате png?

cwd

1

Извините, я недостаточно опытен с элементом canvas, чтобы предложить вам код, но я знаю, что вы можете управлять пикселями индивидуально с помощью canvas.

bfavaretto

189

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

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

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

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

hajpoj
источник

9

Ааа, умно! Не забудьте установить, cursor: default;чтобы пользователи не видели I-Bar. Кроме того, проверьте FF Chartwell, действительно умный шрифт: tktype.com/chartwell.php

Dai

4

Когда вы наводите курсор мыши на текст (как в текстовом редакторе), ваш курсор выглядит как крупный Iсимвол " ", он используется для выделения текста. В CSS это называется cursor: text;. Это также известно как "Я луч".

Дай

38

В последнем выпуске 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 Glyphicons List

fseminario
источник

17

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

Например:  добавление text-infoк CSS сделает иконку синего цвета.

truncie
источник

Спасибо, искал способ применить контекстные классы. Любой из текстовых * контекстных классов будет работать

Дастин Ходжес

14

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

В вашем variables.less находке

// 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>

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

Зепп Людгер
источник

5

просто хотел повторитьI was hoping for some other css3 brilliance that would prevent having to have an icon image set for each color

cwd

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

foxybagga

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

Норман,

7

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

<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>

frbl
источник

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

Ну, вы могли бы просто поменять иконку - хорошо на что-то другое; например, icon-white"> . Например: . Лучше пойти на новый загрузчик Imo ..

Frbl

6

Bootstrap 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 с помощью пользовательских стилей .

Евгений
источник

4

Это все немного окольными ..

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

  </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>

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

Монстры х
источник

4

Также работает с тегом style:

<span class="glyphicon glyphicon-ok" style="color:#00FF00;"></span>

<span class="glyphicon glyphicon-remove" style="color:#FF0000;"></span>

введите описание изображения здесь

joan16v
источник

3

На самом деле это очень просто:

просто используйте:

.icon-name{
color: #0C0;}

Например:

.icon-compass{
color: #C30;}

Вот и все.

Анируддх Диксит
источник

3

Используйте mask-imageсвойство, но это немного взломать. Это продемонстрировано в блоге Safari здесь .

Это также подробно описано здесь .

По сути, вы должны создать блок CSS, скажем, background-image: gradient(foo);а затем применить к нему маску изображения на основе этих изображений PNG.

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

Dai
источник

1

Имейте в виду, что поддержка mask-imageсобственности не так уж велика .

Скотт Бартелл

1

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

Просто отредактировал пути 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;}

mppfiles
источник

Наконец, тот, который совместим со старыми версиями Bootstrap

Дмитрий Гинзбург

1

Вы также можете изменить цвет глобально

т.е.

 .glyphicon {
       color: #008cba; 
   }

разработчик
источник

1

Просто используйте ГЛИФИКИ, и вы сможете изменить цвет, просто установив CSS:

#myglyphcustom {
    color:#F00;
}

Вальтер Лорран
источник

0

Я думал, что мог бы добавить этот фрагмент к этому старому сообщению. Вот что я делал в прошлом, до того, как иконки были шрифтами:

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

WebWanderer
источник

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

Ответы: