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

159

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

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

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

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

— УХО
источник

Я так не думаю ... Но вы могли бы сделать это с помощью 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
источник