Archived topic

Menu bar / Account icon / Hide unpreviewable icon

5 replies · Started by Jan on January 3, 2023

Viewing posts 1–6 of 6

January 3, 2023 at 3:17 am #2481707

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,
Jan

January 3, 2023 at 6:37 am #2482023

Hi there,

just remove the pseudo element from that specific item:

.account-icon a:after {
    display: none;
}

January 3, 2023 at 9:32 am #2482444

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>

January 3, 2023 at 11:43 am #2482574

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;
}

January 3, 2023 at 12:11 pm #2482607

Great advise, Ying

This works very well.

Thanks,
Jan

January 3, 2023 at 12:21 pm #2482612

You are welcome Jan :)

This archived topic is closed to new replies.

Start building better websites today.