NodeBB v3 Vote Icon

[cagatay]

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]

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

[phenomlab]

@cagatay This is in fact @nodebb/nodebb-plugin-reactions

[cagatay]

@phenomlab No i mean those icons changes;

[phenomlab]

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

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

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

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

[phenomlab]

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?

[cagatay]

@phenomlab forget it, look likes good with your codes.