字体真棒 - 更改 class="fa-info-circle" 中的内部 "i" 颜色

Question

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

例如- 在 this fiddler 中只制作红色的 "i"。

Answer 1

无法更改内部 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;
}

这里是 fiddle link : http://jsfiddle.net/Lgq1k4uc/4/

Answer 2

你应该这样实现：

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 3

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

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

勾选 fiddle

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

Answer 4

我以前也遇到过这个问题。假设信息圈图标在中间也是透明的，就像我的一样，你可以添加一个白色背景的 div 并将其绝对定位在图标后面，使用较低的 z-index 值（但等于或更高）比 container/parent 元素）。

示例：

<!-- 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" 颜色

Font awesome - change the inner "i" color in class="fa-info-circle"

css

font-awesome