Fontawesome Instagram Icon - Colorized

Can I change the color of Font Awesome's cog icon?

This worked for me:

.icon-cog {
  color: black;
}

For versions of Font Awesome above 4.7.0, it looks this:

.fa-cog {
  color: black;
}

How to style icon color, size, and shadow of FontAwesome Icons

Given that they're simply fonts, then you should be able to style them as fonts:

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}

How to add a color gradient to the instagram logo without affecting the visibility?

Using radial gradient and background-clip

Credits https://stackoverflow.com/a/49659118/8053274

.wrapper {  justify-content: center;  align-items: center;}
.wrapper i {  padding: 10px;  text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);  transition: all ease-in-out 150ms;}
.wrapper a:nth-child(1) {  color: #3b5998}
.wrapper a:nth-child(2) {  color: #1DA1F2;}
.wrapper a:nth-child(3) {  color: black;}
.wrapper i:hover {  margin-top: -3px;  text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);}
.fa-instagram {  color: transparent;  background: -webkit-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);  background: -o-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);  background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);  background-clip: text;  -webkit-background-clip: text;}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="wrapper">  <a href="http://www.facebook.com"><i class="fa fa-3x fa-facebook-square"></i></a>  <a href="http://www.twitter.com"><i class="fa fa-3x fa-twitter-square"></i></a>  <a href="http://www.instagram.com"><i class="fa fa-3x fa-instagram instagram"></i></a></div>

FontAwesome 5 - Multi color icon

By using gradient for the color and two icons we may achieve this but it remains a hacky way and you need to handle each case (icon + coloration) specifically:

.fa-google path{
  fill:url(#grad1);
}
.fa-google + .fa-google path{
  fill:url(#grad2);
}
.icon {
  display:inline-block;
  position:relative;
}
.fa-google + .fa-google {
   position:absolute;
   left:0;
   top:0;
   clip-path: polygon(0% 0%,120% 0%,0% 75%);
}

<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js" ></script>
<svg style="width:0;height:0;">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="30%" x2="50%" y2="0%">
      <stop offset="50%" stop-color="#34a853" />
      <stop offset="50%" stop-color="#4285f4" />
    </linearGradient>
    <linearGradient id="grad2" x1="0%" y1="30%" x2="50%" y2="0%">
      <stop offset="50%" stop-color="#fbbc05" />
      <stop offset="50%" stop-color="#ea4335" />
    </linearGradient>
  </defs>
</svg>
<div class="icon"> 
<i class="fab fa-google fa-7x"></i>
<i class="fab fa-google fa-7x"></i>
</div>

How to change color of icons in Font Awesome 5?

Font Awesome 5 uses svg for icons and path inside are set with fill:currentColor so simply change color of svg:

.icons svg { color:#2759AE;}

<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script><div class="container mt200 icons">  <div class="col-md-3">    <div class="bggray2 text-center">      <i class="fas fa-microphone fa-5x"></i>      <div class="title">LOREM</div>      <div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>    </div>  </div>  <div class="col-md-3">    <div class="bggray2 text-center">      <i class="far fa-edit fa-5x"></i>      <div class="title">LOREM</div>      <div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.      </div>    </div>  </div></div>

Is it possible to color the fontawesome icon colors?

Font-awesome comes with a number of both outlined and filled icons. The star is one of them.

There are four different star icon classes that you can use:

class="icon-star"
class="icon-star-empty"
class="icon-star-half"
class="icon-star-half-empty"

If you're a glass-half-full type of person, you can also use the alias for 'icon-star-half-empty':

class="icon-star-half-full"

You can colour the font-awesome icons and use different effects to achieve what you're looking for:

<i class="icon-star-empty icon-large icon-a"></i><br><br>
<i class="icon-star-empty icon-large icon-b"></i><br><br>
<i class="icon-star icon-large icon-c"></i> or <i class="icon-star icon-large icon-d"></i>

Where the following CSS is used (rather than using inline styles):

.icon-a {
    color: #888;
} 
.icon-b {
    color: orange;
}
.icon-c {
    color: yellow;
}
.icon-d {
    color: yellow;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: orange;
}

You can also substitute/set the size too, if you don't want to use icon-large.

The above code outputs the following:

but I've put the above code and a few more options in a JSFiddle, which you can look at here.

It's also possible to use css-transitions that provides a way to animate changes to CSS properties instead of having the changes take effect instantly and or in combination with javascript.

How do I change the color of the Facebook Font Awesome icon?

The icon only consists of the part around the 'f', the 'f' itself and the part around the edges are transparent. Therefore you have to create a white part only under the 'f'.

It's possible with a combination of a linear-gradient, background-size and background-position. With the gradient you create a white rectangle, that you can scale and position to only lay under the 'f'.

By using a relative unit (%), your white background rectangle scales with the corresponding font size.

body {  font-size: 5em;  background: #000}
.fa-facebook-square {  color: #3b5998;  background-image: linear-gradient( to bottom, transparent 20%, white 20%, white 93%, transparent 93% );  background-size: 55%;  background-position: 70% 0;  background-repeat: no-repeat;}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /><i class="fa fa-facebook-square"></i>

For some reason, I can't change fontawesome icon colors

if that's you want, then the problem is that you used square icons.

<div class="socials">
    <a href="#"><i class="fas fa-envelope"></i></a>
    <a href="#"><i class="fab fa-facebook-f"></i></a>
    <a href="#"><i class="fab fa-twitter"></i></a>
    <a href="#"><i class="fab fa-github"></i></a>
</div>
.socials {
a {
    display: inline-block;
    width: 6rem;
    height: 6rem;
    font-size: 4rem;
    transition: 0.3s;
    background: transparent;
    text-align: center;
    line-height: 6rem;

    &:hover {
        color: red;
        background: blue;
    }
}

}

---

Related Topics