Question

是否可以在<i class="fa fa-info-circle">内更改内部“i”颜色？

即 - 在this fiddler中只用红色制作“i”。

Answer 1

你应该像这样实现：

HTML

<span class="fa-stack fa-2x">
  <i class="fa fa-circle fa-stack-2x icon-background2"></i>
  <i class="fa fa-info fa-stack-1x"></i> 
 </span>

CSS

.icon-background2 {
    color: #564363;
}

.fa-info {
  color:pink;
}

JSFiddle示例： https://jsfiddle.net/codejhonny/8feo4k4x/

Answer 2

这个图标是透明的，所以你可以达到这个但给它背景颜色

.icon-background1 {
color: blue;
}
.fa-info-circle:before {
  content: "\f05a";
  background-color: red;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: inline-block;
  line-height: 50px;
}

检查小提琴

http://jsfiddle.net/Lgq1k4uc/7/

Answer 3

无法更改内部i颜色。但你可以试试这个：

.icon-background1 {
    color: blue;
    vertical-align:middle
}
a.info {
    position: relative;
    width: 55px;
    height: 55px;
    display: inline-block;
}
.info:before {
    background: red;  
    width: 50px;
    height: 50px;
    border-radius: 100%;
    content: "";
    position: absolute;
    z-index: -1;
    top: 4px;
    left: 1px;
}

这是小提琴链接：http://jsfiddle.net/Lgq1k4uc/4/

Answer 4

我之前也遇到过这个问题。假设信息圈图标在中间也是透明的，就像我的那样，您可以添加一个带有白色背景的div并使用较低的z-index值（但等于或高于容器/）将其放置在图标后面。父元素）。

示例：

<!-- the fa icon div -->
<div class="fa-exclamation-triangle" ...></div>

<!-- the div with white background -->
<div class="exclamation-inside"></div>

<!-- CSS -->
.fa-exclamation-triangle {
    z-index: 2000;
    /* some positioning etc */
}

.exclamation-inside {
    background-color: white;
    position: absolute;
    width: 8px;
    height: 18px;
    top: 12px;
    left: 18px;
    z-index: 100;
}

Answer 5

也许这更简单https://jsfiddle.net/maksuco/3adjtLop/7/

 <span style="font-size: 10rem">
  <i class="fa fa-check check big"></i> big
 </span>
 <br>
 <br>
 <i class="fa fa-check check "></i> normal

.check {
  display: inline;
  color: #8D58B1;
  font-size: 80%;
  &:before {
    padding: .5em;
    border-radius: 50%;
    background-color: #EFE6F3;
  }
  &.big {
    &:before {
      padding: .2em;
    }
  }
}

字体很棒 - 改变class =“fa-info-circle”中的内部“i”颜色

5 个答案: