Menu
I'm trying to make a flag by only using font-awesome and a background colour. However, I can only get it to work by using a url to a background image, which allows me to change its size. position and repeat. If I use a background colour, I am not able to do so.
To reiterate, I only want my background colour to appear in a certain location, and I do not want to load resources from a url and instead work with background colour.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
<i class="fas fa-money-bill-wave-alt" id="flag"></i>
</body>
</html>
#flag{
/*Icon colour is changed to default green*/
color : green;
/*The colour red is taken from folder*/
background : url("red.jpg");
background-size: 30% 40%;
background-position: center;
background-repeat : no-repeat;
border-radius : 100%;
}
287
Select Start > Settings > Personalization > Colors, and then choose your own color, or let Windows pull an accent color from your background.
To learn how to change png color online, follow the easy steps below. Visit PhotoScissors and hit the “Upload Image” butto to get your png. Next, change the mode to solid color. Then click the color option and pick a color you want for your png.
Simply use a linear-gradient:
#flag {
/*Icon colour is changed to default green*/
color: green;
background-image: linear-gradient(red,red);
background-size: 30% 40%;
background-position: center;
background-repeat: no-repeat;
border-radius: 100%;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<i class="fas fa-money-bill-wave-alt fa-5x" id="flag"></i>Using the same color inside the gradient will result on one color gradient and gradient behave like image so you can easily adjust their size and position like you do with images:
.box {
border:1px solid;
width:200px;
height:100px;
background-image:linear-gradient(red,red);
background-size: 50px 50px;
background-position:20% 50%;
background-repeat:no-repeat;
}<div class="box">
</div>You can also use a radial-gradient in case you want to have circular shape (which is also suitable in your actual example):
.box {
border:1px solid;
width:200px;
height:100px;
background-image:radial-gradient(circle at center, red 60%,transparent 61%);
background-size: 50px 50px;
background-position:20% 50%;
background-repeat:no-repeat;
}<div class="box">
</div>And here is with your code:
#flag {
/*Icon colour is changed to default green*/
color: green;
background-image: radial-gradient(circle at center, red 60%,transparent 61%);
background-size: 50% 50%;
background-position: center;
background-repeat: no-repeat;
border-radius: 100%;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<i class="fas fa-money-bill-wave-alt fa-5x" id="flag"></i>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
