用于挂锁的Unicode字形

Question

我需要使用看起来像挂锁的unicode字符。它位于表格下方的按钮上，表示＆＃34; CopyLink __＆＃34;上面有一个挂锁，表示当他们复制他们所在页面的链接时，那个人去了＆＃34; copylink _＆＃34;页面版本将无法修改表单。

无论如何，我环顾四周 - this page有很多其他的unicode符号，但在音符之后，其他符号都没有加载。 this link说我应该能够用ALT + 1F513生成一个挂锁符号..最终成为这个符号♪，而不是一个锁。我最近学会了使用chrome的devtools，所以在miscellaneous unicode symbols wikipedia page，当我看到音乐锋利音符没有加载后的所有东西我都进入了devtools，找到了所有符号的表格是，并删除了DOM中的元素。我想也许浏览器只能同时加载这么多特殊的unicode字符，但我觉得页面没有刷新，所以它们还没有工作，或者它们仍然显示为... twitter bootstrap { {3}}但似乎我必须为这套图标支付60美元......我宁愿避免付钱

unicode符号并不是唯一可接受的解决方案 - 我对任何可以使锁定符号或图像平滑地显示在html按钮中的内容感到满意。如果我必须更改字体无关紧要我可以更改按钮的字体，如果它意味着它将有一个锁定符号。也许不必要的背景信息我使用PHP .. apache，任何字体，但通常 - verdana，tahoma，sans-serif

Answer 1

在SO处搜索Unicode字符是偏离主题的，因此正在搜索“Unicode字形”，无论这可能意味着什么。

将问题解释为要求在HTML文档中包含挂锁符号的方法，有一个简单的答案：如果有一个符合您想要的Unicode字符，请使用它，如果这足够可行;如果没有，请使用以足够大的尺寸创建的图像，并缩小到CSS使用的字体大小。可行性主要取决于字体。有关一般信息，请参阅我的Guide to using special characters in HTML。

在这种情况下，假设您搜索合适的Unicode字符原则上发现LOCK U + 1F512合适，您实际上需要通过@font-face使用可下载字体。支持它的唯一字体，通常安装在人们的计算机上的字体，是Segoe UI字体，仅在相当新版本的Windows上可用。但是，您可以将这些字体放在font-family列表中，以避免在不需要时下载字体。

（如果您更喜欢OPEN LOCK U + 1F513，出于某种原因，即使它建议“打开”而不是“锁定”，情况也是如此：支持其中一个字符的字体也支持另一个字符。 ）

示例（使用Symbola字体转换为Fontie; FontSquirrel拒绝转换，显然因为Symbola超过2兆字节）：

<style>
@font-face {
    font-family:'Symbola-Regular';
    src: url('../Fonts/Symbola/Symbola_gdi.eot');
    src: url('../Fonts/Symbola/Symbola_gdi.eot?#iefix') format('embedded-opentype'),
        url('../Fonts/Symbola/Symbola_gdi.woff') format('woff'),
        url('../Fonts/Symbola/Symbola_gdi.ttf') format('truetype'),
        url('../Fonts/Symbola/Symbola_gdi.svg#Symbola-Regular') format('svg');
}
@font-face {
  font-family: Symbola-Regular;
}
.lock { font-family: Segoe UI Symbol, Symbola-Regular; }
</style>
<span class=lock>&#x1f512;</span>

但是，如果您只想要一个图标，这可能会有点过分。使用一个图像更简单，可能从大尺寸自由字体的LOCK字形开始，进行屏幕捕获，然后只使用img元素：

<img src=lock.png alt=Locked style="height: 0.8em">

Answer 2

您应该可以免费使用bootstrap 附带的glyphicon。另请查看Fontawesome

如果您决定使用Fontawesome，则unicode字符为f023。或者，如果您包含CSS文件，则可以将fa-lock类添加到<i>标记。

<button type="button"><i class="fa fa-lock"></i></button>

或者，您可以在将字体包含并导入CSS文件后，在CSS文件中指定font-family。

例如：

 .your-element:before {
     font-family: "FontAwesome";
     content: "\f023";
 }

你明白了。

Answer 3

您可以使用嵌入的矢量图像来完成此操作，该矢量图像可以像字体一样缩放：

This is text is
<svg width=".7em" height=".9em">
  <g transform="translate(-267 -10)">
    <path d="M274.675 14.847v-1.305c0-1.443-1.223-2.61-2.735-2.61-1.512
             0-2.736 1.167-2.736 2.61v1.305h-.684c-.753 0-1.367.587-1.367
             1.306v3.917c0 .72.614 1.305 1.367 1.305h6.84c.758 0 1.367-.586
             1.367-1.305v-3.917c0-.72-.61-1.306-1.368-1.306h-.685zm-1.367
             0h-2.736v-1.305c0-.72.615-1.306 1.368-1.306.753 0 1.368.587
             1.368 1.306v1.305zm-.406
             5.223h-1.92l.386-1.775c-.368-.194-.625-.566-.625-1
             0-.632.54-1.142 1.197-1.142.662 0 1.197.51 1.197 1.142 0
             .434-.257.806-.625 1l.39 1.775z"/>
  </g></svg>
secure.

（注意，我作弊;为了使它更小，我删除了xmlns属性和一些其他元素，对于我未经训练的SVG眼睛，似乎是不必要的。）

您还可以使用data: URI scheme

将其嵌入图像中

This is text is
<img style="height:.9em" src="data:image/png;base64,iVBORw0KGgoAAAAN
  SUhEUgAAAB4AAAAkCAMAAACpD3pbAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHO
  kAAABCUExURUxpcQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
  AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALENANYAAAAVdFJOUwDTG920xATupruZgE
  v4JA9vO8yLYHMll0gAAADKSURBVDjLvZPbAoMgCIZn5AHtYKve/1UnuIOa3G37b6K+
  +BGo2+1PWoIGwDB0odnnkzWHHsXzLWcu2DMA4MslfyFnXFKgyb+tH9JDzZ5GpTA2mC
  pvOZyoeoMpZX3WISMZD1/Fk0O01FcWdWYR3VQOpKP91Ycgyncy9gmPn1t7DEO0xWoq
  PPPYNgmP+ahawD5jJ2CVvwsQMDdqvFSbV1qOocVrnriAuTiI2NcHb/FBONa4eBvuSV
  C7RXkl5Ga0RDGPKSjbkYrmx7/8A5owKWwwRuJTAAAAAElFTkSuQmCC"/>
secure.

最后，如另一个答案所述，您可以使用官方Unicode lock character：

This text is 🔒 secure

如果客户端系统上安装的任何字体都有此字符，则会进行渲染，因此如果您担心客户端没有此字符，您只需要指定上面的字体任何地方。在这种情况下，请考虑Jukka's answer。不过，我更喜欢使用SVG或PNG方法来实际加载一种新字体，特别是像Symbola 2.1MB那样大的字体（SVG为673B，base64 PNG为668B）。

这些是所有人并排看待（SVG，PNG，Unicode），Firefox在顶部，Chrome在底部（注意，我运行Linux）：

（注意，我没有一个呈现此角色的字体。）