I would like to create icons to link my lemmy, peertube, and mastodon instances to each other.

I’ve managed to achieve this for Lemmy and PeerTube without much of a hassle by creating the SVG icons and duplicating the code for the donate symbol (lemmy) and the about symbol (peertube):

Lemmy:

Peertube:

I thought I would be able to use the same logic to modify the menu bar in Mastodon, but I must say I am very confused by it. I can’t find the files that hold the icons, the syntax is un-intuitive for me, and it seems that there are several levels of files calling each other before finally producing the icon on the page.

Mastodon:

While trying to figure out where the SVG files are stored, I found this issue: Consider: SVG for icons?

Here, I learned that Mastodon uses something called “Webfonts” to generate the icons. From that issue it appears that they never transitioned into using SVG. I can’t find much about how to work with this format - what is this? What would the workflow be like for finding the webfont file and creating a new icon? Any suggestions?

Thanks!

  •  Salamander   ( @Sal@mander.xyz ) OP
    1•1 year ago

    I am getting close!

    It is deployed at https://plethodon.nl

    I have the two entries that will redirect correctly. I have also gone through the source code and ‘un-wrapped’ the code.

    The code reads:

               <a class="column-link column-link--transparent"  href='https://mander.xyz/' title='Mander'>
              <i class="fa fa-globe column-link__icon fa-fw"></i>
              <span>Mander</span>
            </a>

    So, I need to replace the line

    <i class="fa fa-globe column-link__icon fa-fw"></i>

    By something that points at the .svg icon.

    Does anyone know how I can do that? The issue I referenced before suggested this structure:

    <svg class="icon icon-globe">
  <title>Federated Timeline</title>
  <use xlink:href="assets/img/icons.svg#icon-globe"></use>
</svg>

    But that syntax has not worked for me yet. I don’t know what I can use as a ‘class’, or if I need to import one. I also get an error that points at the xlink.