更改字体真棒圆圈图标的背景颜色

Question

我使用了来自 font-awesome 的 2 个图标，前面是 +，后面是一个圆圈。

这是fiddle

我正在尝试更改圆圈的背景颜色，但它不起作用。

代码如下：

.fa-plus{
    background-color: red;
    border-radius: 50%;
}

.wrapper{
  position: relative;
  width: 20%;
  height: 20%;
  margin: auto;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid #000;
}

.image{
  max-width: 100%;
  border-radius: 50%
}

.wrapper span{
  position: absolute;
  bottom: 0;
  right: 15%;
  width: 15%;
  height: 15%;
  z-index: 2;
}

#input{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  cursor: pointer;
  opacity: 0;
}

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="wrapper">
  <input type="file" id="input" name="image" accept="image/*">
  <img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTRT2XK4W0i7icS84Yq5VHpwZ9anmDXoOFQZX0anUhWxcpL5du_">
  <span class="fa-stack" aria-hidden="true">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-plus fa-stack-1x fa-inverse"></i>
  </span>
</div>

我正在使用圆圈为+ 图标赋予圆形背景颜色，我尝试仅添加+ 图标并赋予它padding，但也没有用：

.fa-plus{
    background-color: red;
    border-radius: 50%;
}

.wrapper{
  position: relative;
  width: 20%;
  height: 20%;
  margin: auto;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid #000;
}

.image{
  max-width: 100%;
  border-radius: 50%
}

.wrapper span{
  position: absolute;
  bottom: 0;
  right: 15%;
  width: 15%;
  height: 15%;
  z-index: 2;
  padding: 10%;
}

#input{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  cursor: pointer;
  opacity: 0;
}

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="wrapper">
  <input type="file" id="input" name="image" accept="image/*">
  <img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTRT2XK4W0i7icS84Yq5VHpwZ9anmDXoOFQZX0anUhWxcpL5du_">
  <span class="fa-stack" aria-hidden="true">
    <i class="fa fa-plus fa-stack-1x fa-inverse"></i>
  </span>
</div>

如何解决这个问题？

Answer 1

在 CSS 中添加此属性。

i.fa.fa-circle.fa-stack-2x{
color:green;
}

如果要将加号背景从红色改为绿色（我没有包含在代码sn-p中）

i.fa.fa-plus.fa-stack-1x.fa-inverse {
background: green;
}

.fa-plus{
    background-color: red;
    border-radius: 50%;
}
i.fa.fa-circle.fa-stack-2x{
color:green;
}
.wrapper{
  position: relative;
  width: 20%;
  height: 20%;
  margin: auto;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid #000;
}

.image{
  max-width: 100%;
  border-radius: 50%
}

.wrapper span{
  position: absolute;
  bottom: 0;
  right: 15%;
  width: 15%;
  height: 15%;
  z-index: 2;
}

#input{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  cursor: pointer;
  opacity: 0;
}

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="wrapper">
  <input type="file" id="input" name="image" accept="image/*">
  <img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTRT2XK4W0i7icS84Yq5VHpwZ9anmDXoOFQZX0anUhWxcpL5du_">
  <span class="fa-stack" aria-hidden="true">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-plus fa-stack-1x fa-inverse"></i>
  </span>
</div>

Answer 2

试试这个 HTML 和 CSS。我删除了整个黑色圆圈并将其替换为 CSS clip-path 属性作为加号的背景（它适用于大到中型屏幕，但遗憾的是它不适用于小到额外-小屏幕，所以你必须为 .wrapper 跨度设置一个 min-width 属性，我猜）：

.wrapper{
  position: relative;
  width: 20%;
  height: 20%;
  margin: auto;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid #000;
}

.image{
  max-width: 100%;
  border-radius: 50%
}

.wrapper span{
  position: absolute;
  bottom: 0;
  right: 15%;
  width: 15%;
  height: 15%;
  z-index: 2;
}

#input{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  cursor: pointer;
  opacity: 0;
}
.fa-plus{
  background:black;
  -webkit-clip-path: circle(38% at 50% 50%);
  clip-path: circle(38% at 50% 50%);
}

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="wrapper">
  <input type="file" id="input" name="image" accept="image/*">
  <img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTRT2XK4W0i7icS84Yq5VHpwZ9anmDXoOFQZX0anUhWxcpL5du_">
  <span class="fa-stack" aria-hidden="true">
    <i class="fa fa-plus fa-stack-1x fa-inverse"></i>
  </span>
</div>

Answer 3

将您的 .wrapper span CSS 属性替换为以下内容：

.wrapper span {

    position: absolute;
    bottom: 0;
    right: 15%;
    width: 20px;
    height: 20px;
    z-index: 2;
    padding: 0;
    line-height: 20px;
}