如何在不通过HTTP加载图像的情况下在HTML中显示"重新加载"符号？

Question

我想在我正在创建的HTML/JavaScript应用程序中显示"刷新"符号,但我不想发出任何HTTP请求来加载图像.如何在所有主流浏览器中可靠地执行此操作？

我能找到的最接近的Unicode值是:↺(↺)但箭头指向错误的方向.

是否有另一个Unicode值有效？

是否有适用的Webdings字体？(它们通常不适用于Opera和Firefox.)

有没有办法使用JavaScript中的String提供的base64图像源在JS中创建图像？

编辑:

原因不是开销.正在创建的应用程序必须自包含在单个javascript文件中,没有任何其他依赖项.它是一个可以添加到任何项目的开发实用程序,无需网络.

Answer 1

如果您找到符合您需求的字符↻(),即U + 21BB CLOCKWISE OPEN CIRCLE ARROW(其箭头可能与普通重载图标的放置方式不同),那么您可以相当安全地使用它:

.reload {
  font-family: Lucida Sans Unicode
}

Lucida Sans Unicode字体包含符号,几乎可以在任何Windows系统中找到它.根据MS信息,它甚至包含在Windows 98(和Windows 95 plus)中.

可以合理地预期Windows以外的系统具有某种字体的符号,并且让浏览器知道如何从其中一些字体中获取它.而包含它的字体有它,而类似的形状.(但如果符号需要在风格上与文档文本匹配,则需要更详细地研究这种情况,并尝试确保字体列表中的所有字体或"字体堆栈"都包含它.)

Answer 2

Unicode字符

至少有两个Unicode字符可用作刷新或重新加载图标:

• CLOCKWISE GAPPED CIRCLE ARROW
  U +
  27F3⟳
• CLOCKWISE OPEN CIRCLE ARROW
  U +
  21BB

第一个在Safari或Chrome中不会出现在iOS 7或8或9中.因此,鉴于Paul D. White的答案,我建议使用第二个,CLOCKWISE OPEN CIRCLE ARROW.

提示:如果您是Mac用户,请获取免费的应用程序UnicodeChecker.您可以按名称搜索字符,并且可以看到包含该字符字形的字体列表(在您的特定Mac上).

图标字体

使用可缩放的基于矢量的图标创建了一些字体来代替常规字符字形.

• 字体真棒,请参阅:fa-repeat
• Vaadin字体图标

Answer 3

与你的Unicode字符顺时针相当的是↻,LinkedIn(尽管正如David C. Bishop在评论中指出的那样,Chromebook使用#27f2,⟳).

使用文本字符是一个选项,但Windows XP可能不显示该字符(取决于您使用的字符,以及您显示它的字体). @Jukka K. Korpela指出,这个角色包含在Lucida Sans Unicode字体中,因此即使在Windows XP中它也应该可以正常工作.

对于Wingdings字体,为了避免HTTP请求,您需要确信要在最终用户的计算机上安装有问题的字体.我不认为有一个常见的跨平台Wingdings字体(虽然我可能完全错误).

您确实可以使用JavaScript从包含图像的base64编码表示的字符串创建图像.你可以这样做:

var image = new Image();
image.src = 'data:image/gif;base64,' + BASE64_ENCODED_STRING; // Replace gif with whatever image format it actually is

但是,在Internet Explorer 8及更早版本中,data-uri可能无法正常工作,Windows XP用户可能会被卡住.(并且您实际上并不需要JavaScript:您可以<img>在页面中使用该src属性添加标记.)

Answer 4

如果浏览器支持从Base64字符串加载图像数据,则可以使用img并将其设置src为以下格式:

data:[<mediatype>][;base64],<data>

例如:

var img = document.getElementById("yourImage");
img.src = "data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7";

JSFiddle演示

Answer 5

Unicode 6字符

'时钟向上和向上开启圆形箭头'(U + 1F503)

可悲的是,对字形的字体支持并不是最好的,因此"所有主流浏览器"可能会延伸......: - /

Answer 6

.refresh {
  display: inline-block;
  transform: rotate(90deg);
}

<span>?</span>
<hr>
<span class="refresh">?</span>