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

в Twitter использует значки по технологии glyphicons. Они и есть"available in dark gray and white" по умолчанию:



Picture-58.png



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



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



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

652   14  

14 ответов:

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

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

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

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

187  
2016-12-01 18:47:48

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

38  
2015-02-23 20:53:02

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

например: <span class="glyphicon glyphicon-info-sign text-info"></span> добавление text-info в css сделает значок информация синего цвета.

16  
2016-12-01 19:07:52

еще один возможный способ иметь значки начальной загрузки в другом цвете-создать новый.png в нужном цвете, (например. маджента) и сохранить его в качестве /путь-к-загрузки-УСБ/ИМГ/технологии glyphicons-полурослики-пурпурный.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>

надеюсь, что это помогает кто-то.

14  
2012-11-12 16:25:56

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

<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>
7  
2013-04-17 15:19:36

загрузчика технологии 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 с пользовательскими стилями.

6  
2014-02-04 15:39:32

Это все запутанно..

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

  </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  
2013-08-28 23:17:10

также работает с тегом стиль:

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

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

enter image description here

3  
2015-01-19 13:28:45

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

просто использовать:

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

например:

.icon-compass{
color: #C30;}

вот именно.

3  
2015-11-12 22:12:00

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

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

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

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

3  
2016-12-01 18:24:29

принятый ответ (с использованием шрифта 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;}
1  
2014-05-02 19:17:01

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

т. е.

 .glyphicon {
       color: #008cba; 
   }
1  
2014-07-23 20:46:30

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

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

0  
2014-11-10 18:23:28

просто использовать технологии glyphicons и вы сможете изменить цвет, просто установив в CSS:

#myglyphcustom {
    color:#F00;
}
0  
2016-12-01 17:53:11

Comments

    Ничего не найдено.
Click here to cancel reply.