Чи можу я додати колір до піктограм завантажувача лише за допомогою CSS?

159

У завантажувальній мережі Twitter використовуються значки Glyphicons . available in dark gray and whiteЗа замовчуванням вони " ":

Зображення-58.png

Чи можна використовувати якусь хитрість CSS, щоб змінити кольори піктограм? Я сподівався на якийсь інший блиск css3, який би перешкоджав встановленню зображення значка для кожного кольору.

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

Отже, чи можу я додати колір до піктограм завантажувача лише за допомогою CSS?

— обробляти
джерело

Я не думаю, що так ... Але ви, мабуть, могли це зробити за допомогою JavaScript та елемента "canvas".

— bfavaretto

@bfavaretto - чи можете ви докладно? ти маєш на увазі придумати код / координати, щоб намалювати кожну з піктограм або якось використовувати наявне png-зображення?

— cwd

1

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

— bfavaretto

189

Так, якщо ви використовуєте Font Awesome з Bootstrap! Піктограми трохи відрізняються, але їх більше, вони чудово виглядають у будь-яких розмірах, і ви можете змінювати їх кольори.

В основному піктограми є шрифтами, і ви можете змінити їх колір лише за допомогою властивості кольору CSS. Інструкції щодо інтеграції знаходяться внизу сторінки в наданому посиланні.

Редагувати: піктограми Bootstrap 3.0.0 тепер шрифти!

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

— хаджпой
джерело

9

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

— Дай,

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

— фсемінаріо
джерело

17

Оскільки гліфікони зараз є шрифтами, можна використовувати контекстні класи, щоб застосувати відповідний колір до піктограм.

Наприклад:  додавання text-infoдо css зробить піктограму інформаційно-синім кольором.

— truncie
джерело

Спасибі шукали спосіб застосувати контекстні заняття. Будь-який із текстових контекстуальних класів працюватиме

— Дастін Ходжес,

14

Інший можливий спосіб отримати піктограми завантажувального пристрою іншого кольору - створити новий .png у потрібному кольорі (наприклад, magenta) та зберегти його як / path-to-bootstrap-css / img / glyphicons-halflings- magenta .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>

Сподіваюся, це комусь допоможе.

— Сепп Луджер
джерело

5

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

— зазначити

Неможливо зробити це лише через 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 ..

— пт

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>

Перегляньте курс " Вгору та біг" з 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>

Вуаля, зелені та червоні великі пальці.

— Чудовиська X
джерело

4

Також працює з тегом стилю:

<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, скажіть a, background-image: gradient(foo);а потім застосуйте до нього маску зображення на основі цих зображень PNG.

Це дозволить заощадити час на розробці окремих зображень у Photoshop, але я не думаю, що це дозволить заощадити велику пропускну здатність, якщо ви не відображатимете зображення в найрізноманітніших кольорах. Особисто я б не використовував це, тому що вам потрібно скорегувати свою розмітку, щоб ефективно використовувати техніку, але я є членом школи «думка про непомірність».

— Дай
джерело

1

Майте на увазі, що підтримка mask-imageмайна не настільки велика .

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

1

Прийнята відповідь (використовуючи дивовижний шрифт) є правильною. Але оскільки я просто хотів, щоб червоний варіант відображався на помилках перевірки, я закінчив використовувати пакет Addon, люб’язно запропонований на цьому сайті .

Щойно відредаговані 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

Просто використовуйте GLYPHICONS, і ви зможете змінити колір, встановивши 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,5 пікселів) рівно наполовину значення властивості widthта heightвластивості (обидва 15 пікселів, що робить значок квадратним), що робить елемент круговим.

— WebWanderer
джерело