This allows you to match the brand colors for the instagram logo in the footer social links when using the icon SVG for Instagram.
How To
Styles
Within the section where you’re styling the social media icons, include this.
a {
.icon-instagram {
&:before {
color: transparent;
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;
}
}
}
HTML
This is the setup for your Instagram icon.
<a href="https://www.instagram.com" title="Instagram"><span class="icon icon-instagram" aria-hidden="true"></span><span class="sr-only">Instagram</span></a>
Tags: bs3, bs4, styles, scss, gradient, social media