- This topic has 3 replies, 2 voices, and was last updated 5 years, 5 months ago by
.
-
Posts
-
I’m trying to change the Desktop Off-canvas Icon to a different one, and then also move it to :after, instead of :before.
Here’s what I have so far:
.slideout-toggle:not(.has-svg-icon) a:before {
content: none!important;
}.slideout-toggle:not(.has-svg-icon) a:after {
content: ”;
display: inline-block;
background-repeat: no-repeat;
height: 30px;
width: 30px;
margin: 15px -25px 0 0; <<< this margin is adjusting the entire link not just the carrot icon
background-image: url(‘../wp-content/uploads/2020/04/carrot-right-icon.svg’)!important;
}I wanted to use a font awesome icon or something built in if I could so I could change the color when hovered over, but when I downloaded font awesome’s plugin and used the carrot icon, I got a weird BOX shape icon (which we’ve all seen before) and I couldn’t seem to get the carrot to display. I tried Customize > General > SVG Icons? Idk
So I moved on to using my own SVG icon…
Regardless of the icon’s origin, the problem I’m having is my client wants the carrot larger than the text itself but when I go to change the size of the carrot icon I cannot set the margin or line-height or anything else to bring it back inline with the word “explore”. For whatever reason when I add a margin to the Pseudo-Element it drags the entire word “Explore” with it, and not just the Carrot Icon.
Any ideas if I’m working with the wrong thing here?
Thanks!
Lead Developer
Hi there,
Give this a shot:
.slideout-toggle { position: relative; } .slideout-toggle:not(.has-svg-icon) a::after { position: absolute; margin: 0 0 0 10px; top: calc(50% - 15px); }Let me know 🙂
Brilliant.
Thanks Tom!
You’re welcome 🙂
- You must be logged in to reply to this topic.
