Skip to content

NodeBB v3 Vote Icon

Solved Customisation
9 2 938 1
  • 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 🙂

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

    @phenomlab No i mean those icons changes;
    27311eae-54dd-4a36-aedd-2401a2f7b3ae-image.png

  • @phenomlab No i mean those icons changes;
    27311eae-54dd-4a36-aedd-2401a2f7b3ae-image.png

    @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

    e9bcad3e-c73b-4b03-861d-ee7c7fb9dafa-image.png

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

  • phenomlabundefined phenomlab has marked this topic as solved on

Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

Related Topics