更改引导信息glyphicon中“i”的颜色

时间:2017-01-26 16:44:54

标签: css twitter-bootstrap

我正在使用bootstrap中的信息glyphicon。用css设置color属性会改变“i”所在的小圆圈颜色......但我想改变“i”颜色,我不确定如何。

感谢。

4 个答案:

答案 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;
&#13;
&#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)

  • 为&#34; i&#34;设置background-color: color; &安培; border-radius使其成为循环。
  • 由于它是反向的,color适用于背景。

&#13;
&#13;
.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;
&#13;
&#13;