Change upvote/downvote icons?



  • Aside from creating a child theme, is there any other way to change the icons for upvote and down votes?

    For that matter, can I change the bookmark icon from heart to the bookmark icon?


  • Staff Admin

    @djensen47 said in Change upvote/downvote icons?:

    Aside from creating a child theme, is there any other way to change the icons for upvote and down votes?

    You could possibly do it with custom css and modifying the :before content value?

    0_1542231096539_8c5ba605-a098-4061-b83e-f1f1f7b4e3a4-image.png

    For that matter, can I change the bookmark icon from heart to the bookmark icon?

    Same as above, or maybe you can send a PR to persona since bookmark icon makes more sense now. That thing used to be favourite but it got renamed to bookmark.



  • @baris said in Change upvote/downvote icons?:

    Same as above, or maybe you can send a PR to persona since bookmark icon makes more sense now. That thing used to be favourite but it got renamed to bookmark.

    I can do a PR.



  • I think the thumbs up and thumbs down icons would be less confusing instead of chevrons. These chevrons caused a lot of confusion in our forums.



  • I actually don't like downvotes (just flag it if it's bad). What I actually want to do is set the upvote to a heart (I guess downvote could be a broken heart).



  • Ooh, even better CSS ...

    span.votes .fa-chevron-up:before {
    }
    

    Then it shouldn't universally change the icon.



  • Here's what I ended up using:

    // Change the icon for votes
    span.votes {
        // not voted is outline heart
        .fa-chevron-up:before {
            content: "\f08a";        
        }
        // upvoted is solid heart
        .upvoted .fa-chevron-up:before {
            content: "\f004";
        }
    }
    

    And it works as expected:
    0_1542237583690_cbe0735d-211c-4a32-8e1a-48dc5b50e50e-image.png


  • Global Moderator

    @djensen47 well done



  • Great Idea! I took your solution and added a few lines of CSS to hide the downvote arrow and remove the whitespace.

    // Change the icon for votes
    span.votes {
        // not voted is outline heart
        .fa-chevron-up:before {
            content: "\f08a";        
        }
        // upvoted is solid heart
        .upvoted .fa-chevron-up:before {
            content: "\f004";
        }
    }
    // hide the downvote element to remove whitespace
    a[component="post/downvote"] {
        display: none;
    }
    // reduce margin of post-submenue for alignment 
    .topic .moderator-tools {
        margin-left: 0px;
    }
    

Log in to reply
 

Suggested Topics

| |