我可以添加颜色只使用CSS来引导图标？(Can I add color to bootstrap i

-->

我可以添加颜色只使用CSS来引导图标？(Can I add color to bootstrap i

2019-06-18 02:58发布

站内文章 / 前端开发

64 0

我欲成王，谁敢阻挡

女 | 书童

私信

Twitter的引导通过Glyphicons使用图标。他们是“ available in dark gray and white ”默认情况下：

是否有可能使用一些CSS技巧来改变图标的颜色吗？我希望其他一些CSS3的光彩，将阻止其有一个图标图像为每种颜色设置。

我知道你可以改变封闭（背景颜色元素，但我说的是图标前景色。我想这将是可能的逆图标图像的透明度，然后设置背景颜色。

所以，我可以添加颜色只能使用CSS来引导图标？

Answer 1:

是的，如果你使用字体真棒自举！图标略有不同，但也有更多的人，他们在任何规模的很好看，你可以改变它们的颜色。

基本上，图标字体，你可以改变它们的颜色正好与CSS颜色属性。集成说明在页面中提供的链接的底部。

编辑：引导3.0.0图标现在是字体！

至于其他一些人还与引导3.0.0的发布所提到的，默认的图标字形现在像字体的字体真棒，颜色可以简单地通过改变来改变color的CSS属性。更改大小可以通过做font-size属性。

Answer 2:

自举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;
}

引导3 Glyphicons名单

Answer 3:

由于glyphicons现在的字体，可以使用上下文类为适当的颜色应用于图标。

例如： 添加text-info的CSS将使图标的信息蓝色。

Answer 4:

另一种可能的方法，有引导图标以不同的颜色是在所希望的颜色（例如，品红色）来创建新的.PNG并将其保存为/路径到自举-CSS / IMG / glyphicons-halflings- 品红 .PNG

在您的variables.less找到

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

希望它可以帮助别人。

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

Answer 6:

该引导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>

观看过程中启动和引导3运行由仁克莱默，或看对个人课以自定义的样式重写核心的CSS 。

Answer 7:

这是所有有点迂回..

我用这样的字形

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

瞧，绿色和红色大拇指。

Answer 8:

还与风格标签的工作原理：

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

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

Answer 9:

它实际上是很容易的：

只需使用：

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

例如：

.icon-compass{
color: #C30;}

而已。

Answer 10:

使用mask-image特性，但它是一个黑客攻击的一位。它表现在Safari的博客在这里。

它也深入描述在这里。

基本上你想创建一个CSS框，说一个background-image: gradient(foo); 然后根据这些PNG图像应用图像屏蔽它。

它会为您节省开发时间，在Photoshop中制作单独的图像，但我不认为这会节省大量的带宽，除非你在各种各样的颜色来显示图像。个人因为您需要调整您的标记有效地使用这项技术，我不会使用它，但我是成员“纯度imperitive”学校的深思熟虑。

Answer 11:

接受答案（使用字体真棒）是正确的。但因为我只是想红的变体上显示验证错误，我最终使用的插件包，请提供本网站。

刚才编辑的CSS文件的URL路径，因为他们是绝对的（开始/），我宁愿是相对的。像这样：

.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;}

Answer 12:

您可以全局更改颜色，以及

即

 .glyphicon {
       color: #008cba; 
   }

Answer 13:

我想，我可能这个片段添加到这个古老的帖子。这是我在过去做了，之前的图标是字体：

<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）是完全的一半width和height属性（均为15像素，使得图标的正方形），使得元件是圆形的。