Skip to main content
nicksimard
Contributor ⭐️⭐️⭐️⭐️
Feb 16, 2022 7:57 PM UTC
Solved

Possible to change like, reply and views icons?

Can these be modified, relatively easily?

 

    SmartlyGreg
    Helper ⭐️⭐️⭐️
    Feb 17, 2022 8:28 AM UTC

    @nicksimard if you wanted to you could of course! But you’d have to check every instance of these icons on the multiple pages as they are not all using the same class everywhere...

     

    For the “like” for example, on the main pages where there are listed topics (ie. Old homepage or Community Overview) you could use:

    .icon--thumb-up {
    color: transparent !important;
    }
    .thread-meta-item--likes {
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 17l-5.878 3.59 1.598-6.7-5.23-4.48 6.865-.55L12 2.5l2.645 6.36 6.866.55-5.231 4.48 1.598 6.7L12 17zm0-2.344l2.817 1.72-.766-3.21 2.507-2.147-3.29-.264L12 7.708l-1.268 3.047-3.29.264 2.507 2.147-.766 3.21L12 14.657z' fill='rgba(230,126,34,1)'/%3E%3C/svg%3E");
    }
    .thread-meta-item--likes--liked {
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 17l-5.878 3.59 1.598-6.7-5.23-4.48 6.865-.55L12 2.5l2.645 6.36 6.866.55-5.231 4.48 1.598 6.7z' fill='rgba(230,126,34,1)'/%3E%3C/svg%3E");
    }

    With the icon being an image; when not liked by the current user, and once liked:

    But for the topic pages themselves you’d have to use some other class… Which adds quite a bit of complication! Also the star is actually used for Subscribe button on the topic page so that was a poor choice for the example on my part! 

     

    Hope this helps!

    2 replies

    SmartlyGreg
    Helper ⭐️⭐️⭐️
    Feb 17, 2022 8:28 AM UTC

    @nicksimard if you wanted to you could of course! But you’d have to check every instance of these icons on the multiple pages as they are not all using the same class everywhere...

     

    For the “like” for example, on the main pages where there are listed topics (ie. Old homepage or Community Overview) you could use:

    .icon--thumb-up {
    color: transparent !important;
    }
    .thread-meta-item--likes {
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 17l-5.878 3.59 1.598-6.7-5.23-4.48 6.865-.55L12 2.5l2.645 6.36 6.866.55-5.231 4.48 1.598 6.7L12 17zm0-2.344l2.817 1.72-.766-3.21 2.507-2.147-3.29-.264L12 7.708l-1.268 3.047-3.29.264 2.507 2.147-.766 3.21L12 14.657z' fill='rgba(230,126,34,1)'/%3E%3C/svg%3E");
    }
    .thread-meta-item--likes--liked {
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 17l-5.878 3.59 1.598-6.7-5.23-4.48 6.865-.55L12 2.5l2.645 6.36 6.866.55-5.231 4.48 1.598 6.7z' fill='rgba(230,126,34,1)'/%3E%3C/svg%3E");
    }

    With the icon being an image; when not liked by the current user, and once liked:

    But for the topic pages themselves you’d have to use some other class… Which adds quite a bit of complication! Also the star is actually used for Subscribe button on the topic page so that was a poor choice for the example on my part! 

     

    Hope this helps!

    Translate
    nicksimard
    Contributor ⭐️⭐️⭐️⭐️
    Feb 17, 2022 6:54 PM UTC

    Awesome, thanks! I’ll give that a try :)

    Translate
    Come check out the Zapier Community (built with inSided) at https://community.zapier.com!