Reaction Sizes
Can someone tell me how to change the sizes of the reactions (Love, Like, Wow, etc.). These icons are really tiny.
-
You can edit the mix for your template and add this to Custom Styles
.fa, .fas, .sys-icon, .far, .sys-icon.far, .fal, .sys-icon.fal {
font-family: 'sys-user-fal';
font-weight: 300;
font-style: normal;
font-size: x-large;
}
-
Thank you Jeremy - I had to back it down from x-large to just large since it makes all icons bigger and was messing up my badges. But, it's all good now!
-
You're welcome
-
👍
-
Correct Code
.fa, .fas, .sys-icon, .far, .sys-icon.far, .fal, .sys-icon.fal, .fad, .sys-icon.fad {
font-family: 'sys-user-fal';
font-size: large;
}(font-weight and font-style not really needed in Custom Styles)
Depending on what Style you're using.
Example...
Code above will mess with your 'solid' and change to 'light'. So, in order to fix that...
Regular
font-family: 'sys-user-far';
Light
font-family: 'sys-user-fal';
Duotone
font-family: 'sys-user-fad';
Solid (font-family not needed)
.fa, .fas, .sys-icon, .far, .sys-icon.far, .fal, .sys-icon.fal, .fad, .sys-icon.fad {
font-size: large;
} -
So - I have found out that this code will update ALL icons involved so, I need to find another way, which I did..
You can put this code below into the custom styles and it will increase JUST the reaction icons.
.sys-icon.grin-squint:before, .fa-grin-squint:before {
font-size: large;}
.sys-icon.heart:before, .fa-heart:before {
font-size: large; }
.sys-icon.surprise:before, .fa-surprise:before {
font-size: large;}
.sys-icon.sad-tear:before, .fa-sad-tear:before {
font-size: large;}
.sys-icon.angry:before, .fa-angry:before {
font-size: large;}
.sys-icon.thumbs-up:before, .fa-thumbs-up:before {
font-size: large; }
Now my problem is, the "thumbs-up" icon is the SAME icon used on the posts so, if you make that one larger, then one on the post also increases causing a BIG Thumb on the post itself.. haha.. Any way to create another one or use a different Thumbs Up for Reactions?
-
Now my problem is, the "thumbs-up" icon is the SAME icon used on the posts so, if you make that one larger, then one on the post also increases causing a BIG Thumb on the post itself.. haha.. Any way to create another one or use a different Thumbs Up for Reactions?
Is there someone who can help me out with this? I have included a screenshot to help explain what I want to change.
-
Hello Chris !
Did you try to change the font-size parameter for ul.bx-menu-object-sys_vote_reactions_do class?
-
No, I haven't tried that. Where can I find that at? LeonidS
-
ul.bx-menu-object-sys_vote_reactions_do {
font-size: x-large;}
}
-
I literally just did that a few seconds ago.. haha. Thanks!
-
I literally just did that a few seconds ago.. haha. Thanks!
So where to put everything together?
Step-by-step please?
-
You would go into Studio > Then click whatever template you are using (i.e Protean) > click Styles on the left > Make sure that the style you are using is in the box > Scroll down to Custom Styles and paste this in there:
ul.bx-menu-object-sys_vote_reactions_do {
font-size: x-large;}
}
Click Save
