Social Icon Bar

Generate an icon bar containing all icons whose names are passed to the mixin.


This mixin outputs an icon bar for social media icons. Each of these icons are hyperlinks as well. The links are automatically populated from the config.yml file. As long as the key in the social object in that file matches an icon name passed to the mixin, the value of the config key will populate the href attribute.



  • ...icons - Rest - pass as many icon name string params as you want. This is what will be used to populate the icon bar.

How to Use

+socialIconBar('facebook', 'twitter', 'github', 'stackoverflow')
<div class="icon-bar">
  <a href="link/to/facebook/profile" target="_blank" class="icon">
    <!-- Facebook Icon -->
  <a href="link/to/twitter/profile" target="_blank" class="icon">
    <!-- Twitter Icon -->
  <a href="link/to/github/profile" target="_blank" class="icon">
    <!-- Github Icon -->
  <a href="link/to/stackoverflow/profile" target="_blank" class="icon">
    <!-- Stack Overflow Icon -->