CSS Gradient Overlay for Instagram SVG FontAwesome 5

In this article, we’ll show you how to use CSS to overlay a gradient over Instagram’s SVG. icons and FontAwesome 5 icons.

Read more: CSS Tutorial

1. Overlaying the Instagram SVG Icon with a CSS Gradient

SVG (Scalable Vector Graphics) is an XML-based image format that offers scalability and clarity when displaying icons on web pages. Instagram provides a set of SVG icons, but sometimes we want to add some personalized styling, such as gradient colors. Here is an example:

<svg class="instagram-icon"  viewBox="0 0 24 24"> 
<path fill="#E4405F" d="M17.165 0H6.835C3.06 0 0 3.059 0 6.835v10.33C0 20.942 3.06 24 6.835 24h10.33C20.942 24 24 20.942 24 17.165V6.835C24 3.06 20.942 0 17.165 0zm4.486 17.165c0 2.474-2.01 4.485-4.486 4.485h-10.33c-2.474 0-4.485-2.011-4.485-4.486v-10.33C2.836 2.01 4.847 0 7.322 0h10.33c2.475 0 4.486 2.01 4.486 4.485v10.33z"/> 
<path fill="#FFF" d="M12 5.5c-3.038 0-5.5 2.462-5.5 5.5s2.462 5.5 5.5 5.5S17.5 13.038 17.5 10 15.038 4.5 12 4.5zm0 9.25c-2.486 0-4.5-2.014-4.5-4.5s2.014-4.5 4.5-4.5 4.5 2.014 4.5 4.5-2.014 4.5-4.5 4.5zM17.947 4.385a.692.692 0 00-.692-.692h-2.91a.692.692 0 00-.692.692v2.91c0 .38.308.692.692.692h2.91a.692.692 0 00.692-.692v-2.91zm-3.102 6.15c0 1.763-1.432 3.196-3.196 3.196S8.453 12.297 8.453 10.534s1.433-3.196 3.196-3.196 3.196 1.432 3.196 3.196zm2.618 0c0-2.044-1.657-3.7-3.7-3.7s-3.7 1.656-3.7 3.7 1.656 3.7 3.7 3.7 3.7-1.656 3.7-3.7zm0 0"/> 
</svg> 

<style> 
.instagram-icon { 
background: linear-gradient(to bottom right, #FF512F, #DD2476); }

</style>

In the example code above, we first define the outline of the Instagram icon using SVG’s <path> elements. The fill attribute of each <path> element sets the icon’s color. We then override the original color by adding a CSS gradient style within the <style> tag. This uses the linear-gradient attribute, which accepts two parameters: the gradient direction and color.

2. Overlaying FontAwesome 5 Icons with CSS Gradients

FontAwesome is a very popular icon library that provides a rich collection of icons for us to use. FontAwesome 5 introduced SVG icons and provided several options for customizing the icon styles. Here’s an example:

<i class="fas fa-heart"></i> 

<style> 
.fa-heart { 
background: linear-gradient(to bottom right, #FF512F, #DD2476); 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent; 
} 
</style> 

In the example above, we use the <i> element and the fas fa-heart class from FontAwesome 5 to display a heart icon. We then override the original color by adding a CSS gradient style within the <style> tag. Similar to the Instagram SVG icon, we use the linear-gradient attribute. We also used the -webkit-background-clip and -webkit-text-fill-color properties to apply a gradient to the text color.

This way, we can change the colors of the Instagram SVG icon and the FontAwesome 5 icon using CSS gradients, adding a personalized touch to them.

Summary

In this article, we demonstrated how to use CSS gradients to overlay the Instagram SVG icon and the FontAwesome 5 icon. By using the linear-gradient property and other related properties, we can easily customize the color and style of these icons. We hope these examples are helpful and will help you better apply CSS gradients to your web designs.