Sidebar

Javascript & WebDev

javascript
Javascript & WebDev Sal 2 years ago 100%
Trying to add some custom 'webfont' icons for Mastodon

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: ![](https://mander.xyz/pictrs/image/63def97b-b267-476f-bb3f-fed653e07ecd.png) Peertube: ![](https://mander.xyz/pictrs/image/016937b9-c863-4a55-b951-06d74df8635a.png) 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: ![](https://mander.xyz/pictrs/image/65b4cbc9-ded0-4ff1-8644-771dbdbd6d57.png) While trying to figure out where the SVG files are stored, I found this issue: [Consider: SVG for icons?](https://github.com/mastodon/mastodon/issues/1469) 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!

3
2