Add Mastodon to Tripoli

Themes
1

As per topic. Has anyone managed to add it to the footer share icons?

2

This is the code I used in my theme (not Tripoli.) The precise locations differ from theme-to-theme, but hopefully, this should get you started.

In the relevant .hbs file, add something similar to…

  {{!-- Mastodon --}}
  <a class="social__item"
     href="<your-link>" target="_blank" title="Mastodon"
     aria-label="Mastodon" rel="me">
    {{>icon name="mastodon" size="sm"}}
  </a>

Here is the icon, which should be added to the relevant .svg theme file.

  <symbol role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="mastodon">
    <title>Mastodon</title>
    <path d="M23.193 7.88c0-5.207-3.411-6.733-3.411-6.733C18.062.357 15.108.025 12.041 0h-.076c-3.069.025-6.02.357-7.74 1.147 0 0-3.412 1.526-3.412 6.732 0 1.193-.023 2.619.015 4.13.124 5.092.934 10.11 5.641 11.355 2.17.574 4.034.695 5.536.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.13.54c-2.165-.075-4.449-.234-4.799-2.892a5.5 5.5 0 0 1-.048-.745s2.125.52 4.818.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.508.475-6.508zm-4.024 6.709h-2.497v-6.12c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.313v3.349h-2.484v-3.35c0-1.537-.602-2.313-1.802-2.313-1.085 0-1.628.655-1.628 1.945v6.119H4.831V8.285c0-1.29.328-2.314.987-3.07.68-.759 1.57-1.147 2.674-1.147 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.305z"></path>
  </symbol>
3

Thanks @mjw - I couldn’t get this to work.

As a short-term workaround I have used the pre-built Pinterest code in social-icons.hbs:

    {{#if @custom.pinterest_page}}
    <li class='c-social-icons__item'>
      <a href='{{ @custom.pinterest_page }}' class='c-social-icons__link'>
        <span class='c-social-icons__icon' data-icon='ei-retweet' data-size='s'></span>
        <span class='u-screenreader'>Mastodon</span>
      </a>
    </li>
  {{/if}}

It uses the retweet icon from evil icons. I don’t think they have a Mastodon one.

Then I dropped the Mastodon link into the Pinterest field in Settings > Design > Site-wide

4

Nice workaround. This version should work fine.

  {{#if @custom.pinterest_page}}
    <li class='c-social-icons__item'>
      <a href='{{ @custom.pinterest_page }}' class='c-social-icons__link'>
        <span class='icon c-social-icons__icon' data-size='s'>
          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M21.327 8.566c0-4.339-2.843-5.61-2.843-5.61-1.433-.658-3.894-.935-6.451-.956h-.063c-2.557.021-5.016.298-6.45.956 0 0-2.843 1.272-2.843 5.61 0 .993-.019 2.181.012 3.441.103 4.243.778 8.425 4.701 9.463 1.809.479 3.362.579 4.612.51 2.268-.126 3.541-.809 3.541-.809l-.075-1.646s-1.621.511-3.441.449c-1.804-.062-3.707-.194-3.999-2.409a4.523 4.523 0 0 1-.04-.621s1.77.433 4.014.536c1.372.063 2.658-.08 3.965-.236 2.506-.299 4.688-1.843 4.962-3.254.434-2.223.398-5.424.398-5.424zm-3.353 5.59h-2.081V9.057c0-1.075-.452-1.62-1.357-1.62-1 0-1.501.647-1.501 1.927v2.791h-2.069V9.364c0-1.28-.501-1.927-1.502-1.927-.905 0-1.357.546-1.357 1.62v5.099H6.026V8.903c0-1.074.273-1.927.823-2.558.566-.631 1.307-.955 2.228-.955 1.065 0 1.872.409 2.405 1.228l.518.869.519-.869c.533-.819 1.34-1.228 2.405-1.228.92 0 1.662.324 2.228.955.549.631.822 1.484.822 2.558v5.253z"></path></g></svg>
        </span>
        <span class='u-screenreader'>Mastodon</span>
      </a>
    </li>
  {{/if}}

Icon source: Mastodon Vector SVG Icon - SVG Repo