How do I make website url output appear as an image

  • I want to have my member's website links appear in the message sidebar but when I have the option enabled it looks very bad. Is it possible to have the url appear as an image (or icon) like I have created with Photoshop below? How would it be done if it is possible? Does a plugin already exist for this?

  • If you want to do this purely with CSS:

    Append this to the very end of the additional CSS/LESS input for the target style. You might need to adjust the color used within ::after if used with different styles.

  • @PJK Glad to hear that it's working for you and I thought you might be interested in understanding how this works:

    The code limits the displayed website to a width of 20px as this is roughly the required space for the external URL icon that is still displayed. I've then added white-space: nowrap which prevents the text from wrapping into multiple lines due to the insufficient width and overflow: hidden to cut of the rest of the URL to prevent it from overflowing the now 20px wide element.

    The transparent color is required to hide the text because it is actually still there but cut off, in return I had to apply the original color to the ::after pseudo-element which contains the icon because it would otherwise be invisible too. I've used position: absolute to move the icon from the end of text to the right boundary of the 20px wide element which makes it stick to the right edge and thus nicely aligns with all other display fields.

    Bonus points for not removing the actual link (preserving accessibility, e.g. middle-mouse clicks and such) and achieving the desired result without requiring a customized template which is usually the least favorable way to achieve things due to possible conflicts with updates.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!