Match Instagram Brand Gradient

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