Change the background color of font-awesome circle icon

I'm using 2 icons from font-awesome, A + in front and a circle in the back.

+

Here is a fiddle

I'm trying to change the background color of the circle, But it's not working.

Here is the code:

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

I'm using the circle to give the + icon a circular background color, I tried to add the + icon only and give it padding, But didn't work too:

+

+

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>

How to solve this issue?

+

.fa-plus

background-color

3 Answers
3

Add this property in CSS.

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



If you want to change the plus background from red to green(I haven't included in the code snippet)

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>

+

Try this HTML and CSS. I removed the entire black circle and replaced it with the CSS clip-path property as a background for the plus-sign (It works very well for big-to-medium screens, but sadly it doesn't for small-to-extra-small screens, so you have to set a min-width property for the .wrapper span, I guess):

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

Replace your .wrapper span CSS properties to below:

.wrapper span

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



Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.