Social Icons

The Social Icons component allows for the configuration and display of a social icons item on a page.

The social icons component supports icons and links for the following platforms:

  • Adobe
  • Airbnb
  • Amazon
  • Blogger
  • Discord
  • Etsy
  • Facebook
  • Flickr
  • Google Plus
  • Instagram
  • iTunes
  • LinkedIn
  • Medium
  • Meetup
  • Pinterest
  • Reddit
  • Skype
  • Slack
  • Snapchat
  • Steam
  • Tumblr
  • Twitch
  • Twitter
  • YouTube

Note

Social media links always open in a new tab.

Examples

Social Icons Example Social Icons Example Social Icons Example Social Icons Example Social Icons Example Social Icons Example

Authoring

Social Icons Configuration

Configure Dialog

The configure dialog allows the content author to define the social icons and how it will behave and appear for a visitor to the page.

Properties Tab

Social Icons Social Icons Social Icons Items

Field Description
Type The type of social media icon to display.
URL The URL to your social media page.

Styles

The socialicons comes with a number of available styles that will be customized for your specific site and theme. You can use the styles selector to pick a style for your socialicons.

Social Icons Styles

Available Styles
  • Primary
  • Secondary
  • Large
  • Extra Large
Modes
  • Inverse
  • Stacked
Stack Styles
  • Stacked Square
  • Stacked Circle

Developers

Markup
<div class="cmp-socialicons" data-cmp-is="socialicons">
  <div class="cmp-socialicons__content">
    <ul class="cmp-socialicons__items">
        <li class="cmp-socialicons__item cmp-socialicons__item--adobe">
          <a class="cmp-socialicons__item-link" href="https://www.google.com/" target="_blank" title="adobe">
            <i class="cmp-socialicons__item-icon fab fa-adobe" aria-hidden="true" title="adobe"></i>
          </a>
        </li>
        <li class="cmp-socialicons__item cmp-socialicons__item--airbnb">
          <a class="cmp-socialicons__item-link" href="#" target="_blank" title="airbnb">
            <i class="cmp-socialicons__item-icon fab fa-airbnb" aria-hidden="true" title="airbnb"></i>
          </a>
        </li>
          </a>
        </li>
        <li class="cmp-socialicons__item cmp-socialicons__item--itunes">
          <a class="cmp-socialicons__item-link" href="#" target="_blank" title="itunes">
            <i class="cmp-socialicons__item-icon fab fa-itunes" aria-hidden="true" title="itunes"></i>
          </a>
        </li>
    </ul>
  </div>
</div>