There are different ways to show graphics in a page next to text.
I need to include a graphic/icon next to a hyperlink that indicates a new tab will be opened.
I know of at least these different methods which might be used:
- Unicode character from default fonts
- Unicode character from CSS loaded fonts
- Inline SVG
- Inline PNG
Which of these is most reliable/viable?
Are there other techniques which may be better?
Are there any caveats to be aware of?
There’s no such a thing as an established standard icon.
For example, the icon you chose is similar to the one used in wikipedia to mark links pointing to external websites (not belonging to wikipedia). You may however use it across your websites, and thus establish a convention within your own pages. Just make sure you do so consistently: ALL links marked with that icon MUST open to a new page, and ALL links not marked with it should open in the same page. You may improve accessibility, provided that you have a stable user base, who will have the chance to get used to your conventions. If your site is visited mostly by one-time visitors, then you’d be just adding visual clutter.