Change chevron-up icon to thumbs-up icon in votes

vijay kumavat

Hi

How can i able to change this chevron-up/chevron-down icons to thumbs-up/thumbs-down icons in votes.

I am using Harmony theme.

dave1904

<a component="post/upvote" href="#" class="btn-ghost-sm {{{ if posts.upvoted }}}upvoted{{{ end }}}">
   <i class="fa fa-fw fa-thumbs-up text-primary"></i>
</a>

That's how I've done it. The code is in /node_modules/nodebb-theme-harmony/templates/partials/topic/post.tpl

vijay kumavat

Thank you @dave1904

phenomlab

@vijay-kumavat @dave1904 you are better off targeting the icon itself and using CSS to override it. This way, your changes won't be overwritten on the next upgrade.

vijay kumavat

@phenomlab

I did this too, its not refelected.
https://community.nodebb.org/topic/15746/how-to-change-the-icons/3

phenomlab

@vijay-kumavat Can you show me the code you used ?

vijay kumavat

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

phenomlab

@vijay-kumavat You might need !important for it to take effect.

dave1904

@phenomlab

Good point, you are right. Will do it the same way because it already got overwritten a few times hehe.

omega

@phenomlab said in

You might need !important for it to take effect.

A good tip and point because I'm finding I have to use that a lot more in the live customisation to force targeted CSS changes to take hold.

julian

@omega when everything is !important what truly is important?