Adding social icons to your theme

In this post we explore how to insert and customize social icons anywhere in your theme.

We’ll focus on social links in the header, footer and Article page, but the same process can be applied on any template in your Zendesk theme.

Links to your company pages on social media are typically contained with the page header or footer.

Our patterns provide examples of Facebook, Twitter and LinkedIn social media icons, however you can easily add your own based on your requirements. For example, if you wanted to create a simple footer with links to your Facebook, Twitter and Instagram accounts, you could add to our Simple Centered footer example:

<footer class="py-6 mt-6 bg-white border-top" id="footer">
  <div class="container flex flex-column align-items-center">
    <ul class="nav justify-content-center mb-4" role="menu">
      <li class="nav-item">
        <a class="nav-link text-gray-700 hover:text-base" role="menuitem" href="#">
          Themes
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-gray-700 hover:text-base" role="menuitem" href="#">
          Plugins
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-gray-700 hover:text-base" role="menuitem" href="#">
          Elements
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-gray-700 hover:text-base" role="menuitem" href="#">
          Patterns
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-gray-700 hover:text-base" role="menuitem" href="#">
          Blog
        </a>
      </li>
    </ul>
    <ul class="share font-size-xl text-gray-500">
      <li>
        <a href="#" class="share-facebook" aria-label="Facebook">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12">
            <path fill="currentColor" d="M6 0a6 6 0 01.813 11.945V7.63h1.552l.244-1.585H6.812v-.867c0-.658.214-1.242.827-1.242h.985V2.55c-.173-.024-.538-.075-1.23-.075-1.444 0-2.29.767-2.29 2.513v1.055H3.618v1.585h1.484v4.304A6.001 6.001 0 016 0z"></path>
          </svg>
        </a>
      </li>
      <li>
        <a href="#" class="share-twitter" aria-label="Twitter">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12">
            <path fill="currentColor" d="M12 2.184a4.83 4.83 0 01-1.415.397 2.52 2.52 0 001.083-1.396 4.87 4.87 0 01-1.564.612A2.428 2.428 0 008.308 1c-1.36 0-2.463 1.13-2.463 2.524 0 .198.023.39.065.576C3.863 3.994 2.05 2.99.835 1.46a2.564 2.564 0 00-.332 1.27 2.54 2.54 0 001.094 2.102 2.413 2.413 0 01-1.115-.316v.032c0 1.224.849 2.243 1.974 2.476-.363.1-.743.115-1.112.042.314 1.002 1.223 1.734 2.3 1.754A4.857 4.857 0 010 9.866 6.83 6.83 0 003.774 11c4.528 0 7.005-3.847 7.005-7.182 0-.11-.003-.22-.007-.327.482-.358.898-.8 1.228-1.308z"></path>
          </svg>
        </a>
      </li>
      <li>
        <a href="#" class="share-instagram" aria-label="Instagram">
          <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" x="0" y="0" viewBox="0 0 20.9 20.9">
            <path d="M10.4 1.9c2.8 0 3.1 0 4.2.1 1 0 1.6.2 1.9.4.5.2.8.4 1.2.8.4.4.6.7.8 1.2.1.4.3.9.4 1.9.1 1 .1 1.4.1 4.1s0 3.1-.1 4.2c0 1-.2 1.6-.4 1.9-.2.5-.4.8-.8 1.2-.4.4-.7.6-1.2.8-.4.1-.9.3-1.9.4-1 .1-1.4.1-4.2.1s-3.1 0-4.2-.1c-1 0-1.6-.2-1.9-.4-.5-.2-.8-.4-1.2-.8-.4-.4-.6-.7-.8-1.2-.1-.4-.3-.9-.4-1.9-.1-1.1-.1-1.4-.1-4.2s0-3.1.1-4.2c0-1 .2-1.6.4-1.9.2-.5.4-.8.8-1.2.4-.4.7-.6 1.2-.8.4-.1.9-.3 1.9-.4h4.2m0-1.9C7.6 0 7.3 0 6.1.1 5 .1 4.3.3 3.6.5c-.7.3-1.3.7-1.8 1.3-.6.5-1 1.1-1.3 1.8C.3 4.3.1 5 .1 6.1 0 7.3 0 7.6 0 10.4s0 3.2.1 4.3c.1 1.1.2 1.9.5 2.5.3.7.6 1.3 1.2 1.9.6.6 1.2.9 1.9 1.2.7.3 1.4.4 2.5.5 1.1.1 1.5.1 4.3.1s3.2 0 4.3-.1c1.1-.1 1.9-.2 2.5-.5.7-.3 1.3-.6 1.9-1.2.6-.6.9-1.2 1.2-1.9.3-.7.4-1.4.5-2.5.1-1.1.1-1.5.1-4.3s0-3.2-.1-4.3c-.1-1.1-.2-1.9-.5-2.5-.3-.7-.6-1.3-1.2-1.9-.6-.6-1.2-.9-1.9-1.2-.7-.3-1.4-.4-2.5-.5h-4.4z"/>
            <path d="M10.4 5.1c-3 0-5.4 2.4-5.4 5.4s2.4 5.4 5.4 5.4 5.4-2.4 5.4-5.4-2.4-5.4-5.4-5.4zm0 8.8c-1.9 0-3.5-1.6-3.5-3.5S8.5 7 10.4 7s3.5 1.6 3.5 3.5-1.5 3.4-3.5 3.4z"/>
            <circle cx="16" cy="4.9" r="1.3"/>
          </svg>
        </a>
      </li>
    </ul>
    <p class="text-gray-600 font-size-md">
      © 2020 All rights reserved
    </p>
  </div>
</footer>

Using inline SVGs means that the icons will look great on all screens and you can easily adjsut the size and color to suit. For example, to have the Instagram brand color show on-hover you can add some simple custom CSS to your style.css file:

.share-instagram:hover {
  color: #E1306C;
}

This process can be repeated for any type of icon you wish to include.

Article share links

Zendesk provide out-of-box links for sharing articles through the {{share}} helper. This adds links to share content on Facebook, Twitter and LinkedIn:

{{share}}

The helper produces the HTML and the hyperlinks themselves, ensuring that when a visitor clicks on one your page information is loaded and ready to share.

You can wrap the helper in a <div> element and use utilities to modify the appearance of the links. For example, to have the links appear larger you could use .font-size-xl from our Font Size utilities.

Changing the icons isn’t possible using the helper directly, however you can use your own HTML instead based on the HTML that the helper produces:

<ul class="share">
  <li>
    <a href="#" class="share-facebook" aria-label="Facebook">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12">
        <path fill="currentColor" d="M6 0a6 6 0 01.813 11.945V7.63h1.552l.244-1.585H6.812v-.867c0-.658.214-1.242.827-1.242h.985V2.55c-.173-.024-.538-.075-1.23-.075-1.444 0-2.29.767-2.29 2.513v1.055H3.618v1.585h1.484v4.304A6.001 6.001 0 016 0z"></path>
      </svg>
    </a>
  </li>
  <li>
    <a href="#" class="share-twitter" aria-label="Twitter">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12">
        <path fill="currentColor" d="M12 2.184a4.83 4.83 0 01-1.415.397 2.52 2.52 0 001.083-1.396 4.87 4.87 0 01-1.564.612A2.428 2.428 0 008.308 1c-1.36 0-2.463 1.13-2.463 2.524 0 .198.023.39.065.576C3.863 3.994 2.05 2.99.835 1.46a2.564 2.564 0 00-.332 1.27 2.54 2.54 0 001.094 2.102 2.413 2.413 0 01-1.115-.316v.032c0 1.224.849 2.243 1.974 2.476-.363.1-.743.115-1.112.042.314 1.002 1.223 1.734 2.3 1.754A4.857 4.857 0 010 9.866 6.83 6.83 0 003.774 11c4.528 0 7.005-3.847 7.005-7.182 0-.11-.003-.22-.007-.327.482-.358.898-.8 1.228-1.308z"></path>
      </svg>
    </a>
  </li>
  <li>
    <a href="#" class="share-linkedin" aria-label="LinkedIn">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12">
        <path fill="currentColor" d="M10.8 0A1.2 1.2 0 0112 1.2v9.6a1.2 1.2 0 01-1.2 1.2H1.2A1.2 1.2 0 010 10.8V1.2A1.2 1.2 0 011.2 0h9.6zM8.09 4.356a1.87 1.87 0 00-1.598.792l-.085.133h-.024v-.783H4.676v5.727h1.778V7.392c0-.747.142-1.47 1.068-1.47.913 0 .925.854.925 1.518v2.785h1.778V7.084l-.005-.325c-.05-1.38-.456-2.403-2.13-2.403zm-4.531.142h-1.78v5.727h1.78V4.498zm-.89-2.846a1.032 1.032 0 100 2.064 1.032 1.032 0 000-2.064z"></path>
      </svg>
    </a>
  </li>
</ul>

An alternative would be to use a service like ShareThis, which is configurable and provide a simple embeddable script that you can add to your page template.