How can I display a 'Reload' symbol in HTML without loading an image via HTTP?
Solution 1:
If you find the character ↻ (↻), i.e. U+21BB CLOCKWISE OPEN CIRCLE ARROW, acceptable for your needs (its arrow might not be placed the same way as in common reload icons), then you can use it rather safely:
.reload {
font-family: Lucida Sans Unicode
}<span class=reload>↻</span>The Lucida Sans Unicode font contains the symbol, and it is available in virtually any Windows system you can find these days. According to MS info, it was included even in Windows 98 (and Windows 95 plus).
Systems other than Windows can reasonably be expected to have the symbol in some font and to have browsers that know how to pick it up from some of them. And fonts containing it have rather similar shapes for it. (But if the symbol needs to match stylistically the text of your document, you need to study the situation in more detail and try to make sure that all fonts in your font list, or “font stack”, contain it.)
Solution 2:
Unicode Character
There are at least two Unicode characters that might serve as Refresh or Reload icons:
- CLOCKWISE GAPPED CIRCLE ARROW
U+27F3
⟳ - CLOCKWISE OPEN CIRCLE ARROW
U+21BB
↻
The first does not appear in iOS 7 or 8 or 9 in either Safari or Chrome. So given that, and given the answer by Paul D. White, I recommend using the second one, CLOCKWISE OPEN CIRCLE ARROW.
Tip: If you are a Mac user, obtain the free-of-cost app UnicodeChecker. You can search for characters by name, and you can see a list of fonts (on your particular Mac) containing a glyph for that character.
Icon Font
Some fonts have been created with scalable vector-based icons in place of regular character glyphs.
- Font Awesome, see: fa-repeat
- Vaadin Font Icons
Solution 3:
If the browser supports loading image data from a Base64 string, you can use img and set its src to the following format:
data:[<mediatype>][;base64],<data>
Example:
var img = document.getElementById("yourImage");
img.src = "data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7";<img id="yourImage" />Solution 4:
The clockwise equivalent to your Unicode character is ↻, ↻ (although, as David C. Bishop notes in the comments, Chromebooks use #27f2, ⟳).
Using a text character is an option, but Windows XP might not display the character (depending on the character you use, and the font you display it in). @Jukka K. Korpela notes that this character is included in the Lucida Sans Unicode font, so it should work fine even in Windows XP.
As far as Wingdings fonts go, to avoid an HTTP request you’d need to be confident that the font in question in going to be installed on end user’s computers. I don’t think there’s a common cross-platform Wingdings font (I could be entirely wrong though).
You can indeed create an image from a string that contains the base64-encoded representation of the image using JavaScript. You could do so like this:
var image = new Image();
image.src = 'data:image/gif;base64,' + BASE64_ENCODED_STRING; // Replace gif with whatever image format it actually is
The data-uri might not work great in Internet Explorer 8 and earlier though, which Windows XP users may be stuck on. (And you don’t actually need JavaScript for this: you can just put an <img> tag in your page with that src attribute.)
Solution 5:
Unicode 6 Character
'CLOCKWISE DOWNWARDS AND UPWARDS OPEN CIRCLE ARROWS' (U+1F503) 🔃
Sadly font support for the glyph is not the best, so "all major browsers" might be a stretch... :-/