- This topic has 5 replies, 3 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
Hi there,
I found this threat very useful for creating the account icon in the header menu bar.
What is different in my case is that the login page is a different URL which makes the external link icon show up below the account icon. I tried two ways for hiding the icon:
(1) adding an exclusion to the Fontawesome CSS
:not([href*="other-domain.com"])
(2) adding a separate CSS statement targeting the Fontawesome item directly (see screenshot)–> both ways will hide the account icon also
How would you go about hiding the external link icon only?
Thanks,
JanCustomer Support
Hi there,
just remove the pseudo element from that specific item:
.account-icon a:after { display: none; }Hi David,
thanks for getting back promptly. I replaced the CSS accordingly (see Screenshot).
Still both icons disappear ;-/
What am I missing?
Thanks,
Jan—PHP used in the Elements Hook—
<span class="account-icon"> <a href="https://other-domain.de "> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 256c70.7 0 128-57.31 128-128s-57.3-128-128-128C153.3 0 96 57.31 96 128S153.3 256 224 256zM274.7 304H173.3C77.61 304 0 381.6 0 477.3c0 19.14 15.52 34.67 34.66 34.67h378.7C432.5 512 448 496.5 448 477.3C448 381.6 370.4 304 274.7 304z"></path></svg> </a> </span>Customer Support
Hi Jan,
David’s CSS doesn’t affect the account icon.
The account icon is missing because it has no sizing attribute.
Try adding this CSS:
span.account-icon svg { width: 1em; }Great advise, Ying
This works very well.
Thanks,
JanYou are welcome Jan 🙂
- You must be logged in to reply to this topic.
