我正在使用bootstrap中的信息glyphicon。用css设置color属性会改变“i”所在的小圆圈颜色......但我想改变“i”颜色,我不确定如何。
感谢。
答案 0 :(得分:2)
您可以设置背景颜色,然后尝试使用圆角隐藏背景边缘,如下所示:(它不完美,但实现了2色效果)
.glyphicon-info-sign
{
color:yellow;
background-color: red;
border-radius: 50%;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Info-sign Glyph</h2>
<p>Info-sign icon: <span class="glyphicon glyphicon-info-sign"></span></p>
<p>Info-sign icon as a link:
<a href="#">
<span class="glyphicon glyphicon-info-sign"></span>
</a>
</p>
<p>Info-sign icon on a button:
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-info-sign"></span> Info
</button>
</p>
<p>Info-sign icon on a styled link button:
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-info-sign"></span> Info
</a>
</p>
</div>
</body>
</html>
&#13;
答案 1 :(得分:0)
它是透明的,所以你不能改变“i”的颜色。想象一下有一个带有i形孔的彩色圆盘。但是你可以在背后放置另一个背景颜色的元素。
答案 2 :(得分:0)
实现此目的的一种方法是使用::after
伪元素来提供color
,::before
伪元素的文本是透明的。
CSS的内容如下,评论中的解释:
/* providing the default styles for the
::after pseudo-element: */
.glyphicon::after {
/* We need to specify the 'content' (even if only
an empty string) for the pseudo-element to
show up on the page; as we only want to take
advantage of its background-color we don't
need to assign any content:*/
content: '';
/* to ensure that the pseudo-element takes the full
space of the parent-element, which is sized
according to its ::before pseudo-element, we
position it absolutely, and align it to the
borders of the parent element: */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* we want the background-color to show 'behind' or
'under' the ::before pseudo-element, so we specify
a lower z-index (which places it 'behind'
the previous pseudo-element in the vertical 'stack': */
z-index: -1;
/* to style the pseudo-element as circular: */
border-radius: 50%;
/* to prevent its content spilling out, this is
probably pointless, and entirely 'too' safe: */
overflow: hidden;
}
/* using class-names according to their potential
'themes' of use; here we specify the ::after
pseudo-element of glyphicon elements which
also have the 'warning' class: */
.warning.glyphicon::after {
background-color: red;
}
/* As above, but here we style the pseudo-element
of those glyphicons which also have the 'safe'
class: */
.safe.glyphicon::after {
background-color: limegreen;
}
.glyphicon::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
border-radius: 50%;
overflow: hidden;
}
.warning.glyphicon::after {
background-color: red;
}
.safe.glyphicon::after {
background-color: limegreen;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<i class="glyphicon glyphicon-info-sign"></i>
<i class="glyphicon glyphicon-info-sign warning"></i>
<i class="glyphicon glyphicon-info-sign safe"></i>
答案 3 :(得分:-1)
background-color: color;
&安培; border-radius
使其成为循环。color
适用于背景。
.glyphicon-info-sign.red {
color: lightgray;
background-color: red;
border-radius: 50%;
}
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<i class="glyphicon glyphicon-info-sign"></i>
<i class="glyphicon glyphicon-info-sign red"></i>
&#13;