XF 2.2 Change up/down vote icons but only in Suggestion type, not Q&A

[beerForo]

I have a use case to use thumbs up and down in a Suggestion type but want to preserve the Q&A icons. Would anyone assist? Thanks for your time.

 

[Paul B]

You can target the icons for those thread types using [data-template="thread_view_type_suggestion"] in the extra.less template, for example:

[data-template="thread_view_type_suggestion"]
{
    .contentVote-vote--up:before
    {
        content: "\f164";
    }
    .contentVote-vote--down:before
    {
        content: "\f165";
    }
}

 

[beerForo]

Thanks! And if I decide I want to change to thumbs up/down for questions also I can just change the icons overall with

.contentVote-vote.contentVote-vote--up:before {
}

Etc...
Correct?

 

[Paul B]

See my edited post above.

You can use the standard class names without the data-template to change all other instances.

 

[beerForo]

Fantastic!

 

[beerForo]

Sine in this instance I will be using thumbs up/down, if I wanted to hide the reactions in the first post only (Suggestion-type), would that be as simple as a hide code?

 

[Paul B]

You would likely have to use a conditional statement targeting the first post ID.

 

[beerForo]

Alright thanks. That's beyond my ability, I'll request it if no one posts it here. Thanks a lot!

 

[beerForo]

You can target the icons for those thread types using [data-template="thread_view_type_suggestion"] in the extra.less template, for example:

[data-template="thread_view_type_suggestion"]
{
    .contentVote-vote--up:before
    {
        content: "\f164";
    }
    .contentVote-vote--down:before
    {
        content: "\f165";
    }
}

It is possible we can define the style of the fontawesome icon? In other words I want to use the solid version but it seems to be inheriting the regular since they are the same unicode. Can we use the class?

 

[Ozzy47]

Untested:

[data-template="thread_view_type_suggestion"]
{
    .contentVote-vote--up:before
    {
        content: "\f164";
        font-weight: 700;
    }
    .contentVote-vote--down:before
    {
        content: "\f165";
        font-weight: 700;
    }
}

 

[beerForo]

I mean, each fontawesome has 5 versions. The unicode just defaults to the regular. But there is solid, regular, light, thin, duotone. How can we use the different ones in the extra.less?

 

[Paul B]

The font weight handles the standard cases.

For duotone, I believe you use a different prefix - fad from memory.

 

[beerForo]

So where would I put that instead of unicode? This is a duotone trophy for example:

<i class="fad fa-trophy"></i>

 

[beerForo]

So this code works there but how can I get duotone here? fad does not seem to work.

    .contentVote-vote--up:before
    {
        .m-faContent(@fa-var-trophy);
    }

 

[beerForo]

Any help appreciated in using the prefix in the css thanks.

 

[Jeremy P]

The prefixes only work for inline icons, not CSS-based ones. In either case, you'll need to add the fa-duotone-900.woff2 (178kb) font to your site (in the font_awesome_setup template). Then you'd need something like (untested):

.contentVote-vote--up
{
    .m-faBase('Duotone', 900);
    .m-faBefore(@fa-var-trophy);
}

 

[beerForo]

Good info! Thanks!

 

[beerForo]

Actually just discovered this XF setting! Cool.

It's global, but I like it.