Add Mastodon social icon?

  • Author
  • #134190

    It looks like the Mastodon social icon is not supported? What is the best and easiest way to add this icon?

    Thank you! Vicki

    Cryout Creations mastermind


    Adding extra social icons in Roseta (and our other themes) is a task complex enough to warrant its own dedicated tutorial, which we hope to get around to eventually.

    Until then, adding Mastodon (and a couple of other services) to the included icons list is on our to-do list for as soon as possible.

    If you like our creations, help us share by rating them on
    Please check the available documentation and search the forums before starting a topic.

    you can add a new icon yourself
    download the font called socials
    then add new icons

    then you need to create a child theme
    style.css will be created in it
    download these fonts in a separate folder in my case fonts

    open it and add a description of the inoknok e.g. whatsapp and telegram

    /* Social Icons */
    @font-face {
    font-family: ‘socials’;
    src: url(‘/fonts/socials.eot’);
    src: url(‘/fonts/socials.eot?#iefix’) format(’embedded-opentype’),
    url(‘/fonts/socials.woff’) format(‘woff’),
    url(‘/fonts/socials.ttf’) format(‘truetype’),
    url(‘/fonts/socials.svg?#socials’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    .socials a::before,
    .socials a::after,
    [class*=” socicon-“]::before {
    font-family: “socials”;
    font-style: normal;
    font-weight: normal;
    speak: never;
    content: ‘\e83d’;
    display: inline-block;
    text-decoration: inherit;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    .socials a.whatsapp::before { content: ‘\f232’; }
    .socials a.telegram::before { content: ‘\f2c6’; }

    .socials a.whatsapp::after { content: ‘\f232’; }
    .socials a.telegram::after { content: ‘\f2c6’; }

    .socials-whatsapp::before { content: ‘\f232’; }
    .socials-telegram::before { content: ‘\f2c6’; }


    • This reply was modified 1 month ago by ruslan.
    • This reply was modified 1 month ago by ruslan.
Viewing 3 posts - 1 through 3 (of 3 total)

You need to log in to reply to this topic.