我可以仅使用CSS为引导图标添加颜色吗？
cwd*_*cwd 159 css css-sprites sprite twitter-bootstrap
Twitter的bootstrap使用Glyphicons的Icons.它们available in dark gray and white默认为" ":
是否可以使用一些CSS技巧来改变图标的颜色？我希望有一些其他css3的亮度可以防止必须为每种颜色设置一个图标图像.
我知道你可以改变enclosing(<i>)元素的背景颜色,但我说的是图标前景色.我想可以反转图标图像上的透明度,然后设置背景颜色.
那么,我可以仅使用CSS为引导图标添加颜色吗？
haj*_*poj 189
是的,如果您使用带有Bootstrap的Font Awesome!图标略有不同,但有更多图标,它们在任何尺寸下看起来都很棒,您可以更改它们的颜色.
基本上图标是字体,您可以使用CSS颜色属性更改它们的颜色.集成说明位于提供的链接中的页面底部.
编辑: Bootstrap 3.0.0图标现在是字体!
正如其他一些人在Bootstrap 3.0.0的发布中也提到的那样,默认图标字形现在是Font Awesome等字体,只需更改colorCSS属性即可更改颜色.可以通过font-size属性更改大小.
- 啊,聪明!不要忘记设置`cursor:default;`这样用户就看不到I-Bar了.另外,请查看FF Chartwell,一个非常聪明的字体:http://tktype.com/chartwell.php (9认同)
- 当你将鼠标悬停在文本上时(比如在文字处理器中),你的光标看起来像一个超大的大写"我"字符,它用于选择文本.在CSS中,它被称为`cursor:text;`.它也被称为"工字梁". (4认同)
fse*_*rio 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;
}
小智 14
使用不同颜色的引导图标的另一种可能方法是创建所需颜色的新.png(例如洋红色)并将其保存为/ 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";
在你的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>
希望它可以帮助某人.
- 只是想重申一下"我希望能有一些其他的css3才能防止必须为每种颜色设置一个图标图像" (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 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>
观看Jen Kramer的Up and Running with Bootstrap 3课程,或观看使用自定义样式覆盖核心CSS的单独课程.