Change upvote/downvote icons?

[djensen47]

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?

[baris]

@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?

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.

[djensen47]

@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.

[Tom_Rade]

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.

[djensen47]

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).

[djensen47]

Ooh, even better CSS ...

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

Then it shouldn't universally change the icon.

[djensen47]

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:

[PitaJ]

@djensen47 well done

[suparomana]

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;
}