How do I make website url output appear as an image

If you want to do this purely with CSS:

.messageSidebar .userCredits .externalURL {
	width: 20px;
	overflow: hidden;
	display: inline-block;
	white-space: nowrap;
	position: relative;
	color: transparent;

	&::after {
		position: absolute;
		right: 0;
		color: rgb(51, 102, 153);
	}
}

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.