NodeBB v3 Vote Icon
-
Hi Mark
Could you please share with me codes which are changing to up vote, down vote icons to heart and down finger? Also when it voted the icon should be red color as my v2 version.
-
@cagatay Try this CSS
[component="post"] .fa-chevron-down::before { content: "\f0a7"; } [component="post"] .fa-quote-right::before { content: "\f004"; }
This will change the icons. However, changing the colour when an upvote is received will require custom code. We never did this on v2 of your forum (from memory - I could be wrong) - it was for the bookmarks.
@phenomlab said in NodeBB v3 Vote Icon:
[component=“post”] .fa-chevron-down::before {
content: “\f0a7”;
}
[component=“post”] .fa-quote-right::before {
content: “\f004”;
}Code should be;
[component="post"] .fa-chevron-down::before { content: "\f0a7"; } [component="post"] .fa-chevron-up::before { content: "\f004"; } -
Hi Mark
Could you please share with me codes which are changing to up vote, down vote icons to heart and down finger? Also when it voted the icon should be red color as my v2 version.
@cagatay This is in fact
@nodebb/nodebb-plugin-reactions
-
@phenomlab No i mean those icons changes;
-
@phenomlab No i mean those icons changes;
@cagatay Try this CSS
[component="post"] .fa-chevron-down::before { content: "\f0a7"; } [component="post"] .fa-quote-right::before { content: "\f004"; } This will change the icons. However, changing the colour when an upvote is received will require custom code. We never did this on v2 of your forum (from memory - I could be wrong) - it was for the bookmarks.
-
@cagatay Try this CSS
[component="post"] .fa-chevron-down::before { content: "\f0a7"; } [component="post"] .fa-quote-right::before { content: "\f004"; }
This will change the icons. However, changing the colour when an upvote is received will require custom code. We never did this on v2 of your forum (from memory - I could be wrong) - it was for the bookmarks.
@phenomlab i saved those codes from v2;
span.tag:before { content: "\f02c"; font-family: "Font Awesome 5 Free"; margin-right: 3px; margin-left: 2px; font-weight: 600; font-size: 9px; vertical-align: 0; } .fa-chevron-up:before { font-family: 'Font Awesome 5 Free'; color: red; } } span.votes { .fa-chevron-down:before { content: "\f165"; font-weight: 400; } .downvoted .fa-chevron-down:before { content: "\f165"; font-weight: 900; color: red; } } .fa-chevron-down:before { font-family: 'Font Awesome 5 Free'; font-weight: 300; font-size: 16px; content: '\f165'; margin-right: 4px; vertical-align: -1px; color: red; } span.votes { .fa-chevron-up:before { content: "\f004"; font-weight: 400; } .upvoted .fa-chevron-up:before { content: "\f004"; font-weight: 900; -
@cagatay Try this CSS
[component="post"] .fa-chevron-down::before { content: "\f0a7"; } [component="post"] .fa-quote-right::before { content: "\f004"; }
This will change the icons. However, changing the colour when an upvote is received will require custom code. We never did this on v2 of your forum (from memory - I could be wrong) - it was for the bookmarks.
@phenomlab there previous icon cant changed with this code just added new one as photo; .fa-quote-right is false Mark, it should be about chevron up or something like that
-
@cagatay Try this CSS
[component="post"] .fa-chevron-down::before { content: "\f0a7"; } [component="post"] .fa-quote-right::before { content: "\f004"; }
This will change the icons. However, changing the colour when an upvote is received will require custom code. We never did this on v2 of your forum (from memory - I could be wrong) - it was for the bookmarks.
@phenomlab said in NodeBB v3 Vote Icon:
[component=“post”] .fa-chevron-down::before {
content: “\f0a7”;
}
[component=“post”] .fa-quote-right::before {
content: “\f004”;
}Code should be;
[component="post"] .fa-chevron-down::before { content: "\f0a7"; } [component="post"] .fa-chevron-up::before { content: "\f004"; } -
Yes, sorry - you’re right. The problem is that the icons are hidden unless you hover over them in each post, so difficult to target. If you add
color: red;
to each of those classes, they will be in red regardless of voting state (for example, will trigger even if there are no votes) and I’m pretty sure that isn’t what you want? -
Yes, sorry - you’re right. The problem is that the icons are hidden unless you hover over them in each post, so difficult to target. If you add
color: red;
to each of those classes, they will be in red regardless of voting state (for example, will trigger even if there are no votes) and I’m pretty sure that isn’t what you want?@phenomlab forget it, look likes good with your codes.
-
Hello! It looks like you're interested in this conversation, but you don't have an account yet.
Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (ether email, or push notification). You'll also be able to save bookmarks, use reactions, and upvote to show your appreciation to other community members.
With your input, this post could be even better 💗
RegisterLog in