Style icons

This topic contains 6 replies, has 2 voices, and was last updated by  Andreas67 8 months ago.

Author Posts

Andreas67

Hello,
I´am new to MT. Is there any way to change the size and color of these icons from 3DFlipbook like the search at the top of the page with MT? I have not found a way to get to the element yet.

Here you can see the icons:
https://plugintest.wpak.xyz/testbook/

Thanks

Andreas


Sebastian

Hey Andreas,

Thanks for providing the link. It looks like the icons in the footer are creating using a ::before pseudo element. So you need to adjust the default MT selector using the Selector modifiers menu. See the cog icon to the right of the selector code field in the top toolbar. Click that to show all the selector modifiers. The ::before checkbox is on the right hand side.

Once you’ve created a selector using ::before, you can change font-size and color to change the icons.

I hope that helps. Please let me know if you’re still stuck.

Thanks,
Sebastian


Andreas67

Hello Sebastian,

great, thank you! When I add manuell the right class name it works 🙂

Thanks again

Andreas


Sebastian

Ah yes, I forgot to mention that to widen the targeting to all icons (after clicking one), you can choose an alternative suggestion from the dropdown list in the top toolbar – or opening the “Inspect” toolbar in the footer.

I’m glad you managed to solve this one.

Cheers,
Sebastian


Andreas67

How can I select the right class? I only see span.flipbook-icon-search, but I need .flipbook-icon-search:before. In the dropdown in the top I see many classes, but not this one. I have search for this in the stylesheet.


Sebastian

:before won’t be included in the list by default. But you can update the suggestions to include :before using the Selector modifiers menu (shown below):

Selector modifiers menu

Cheers,
Sebastian


Andreas67

Thank you Sebastian, I will try it 🙂

You must login or register to reply to this topic.