Springboard

Social Media Icons: Instagram 

<!-- Render the icons with svg "use". Note the role, aria label and title for accessibility -->
<svg role="img" aria-label="Instagram icon" class="social-icon">
  <title>Instagram icon</title>
  <use xlink:href="../../images/social-media.svg#icon-instagram" />
</svg>
 
<!-- Render the icons with svg "use". Note the role, aria label and title for accessibility -->
<svg role="img" aria-label="{{ icon.name }} icon" class="social-icon">
  <title>{{ icon.name }} icon</title>
  <use xlink:href="../../images/{{ filename }}#{{ icon.id }}" />
</svg>
 
{
  "filename": "social-media.svg",
  "icon": {
    "name": "Instagram",
    "id": "icon-instagram"
  }
}
  • Content: 
    /*
  Social Media Icons
*/
.social-icon {
  height: 2rem;
  width: 2rem;
  margin: 0 .5rem;
  fill: rgba(0,0,0,.3);
  transition: all 200ms ease-in-out;
}
.social-icon:hover {
  fill: rgba(0,0,0,.6);
}
  • URL: /components/raw/social-icons/_sass.scss
  • Filesystem Path: components/02-modules/icons/social-icons/_sass.scss
  • Size: 202 Bytes

Social Media Icons

SVG icons for common social media sites. Sprite must be inlined in HTML doc head to support IE8-11. To use an external sprite with older IE versions you’ll need SVG for Everybody or svgxuse.

Use role, aria-label, and title for accessibility. See source code and this Stack Overflow discussion. http://stackoverflow.com/questions/4697100/accessibility-recommended-alt-text-convention-for-svg-and-mathml

social-media.svg generated by icomoon