掛鎖的Unicode字形

我需要使用看起來像掛鎖的unicode字符。這是一個表格下面的一個按鈕，帶有掛鎖的「CopyLink __」，表示當他們複製他們所在頁面的鏈接時，轉到頁面的「copylink _」版本的人將不會能夠修改表單。掛鎖的Unicode字形

無論如何，我環顧四周 - this page有很多雜項unicode符號，但在音符尖音符後面其餘的符號不加載。 this link說我應該可以用ALT + 1F513生成一個掛鎖符號，這個符號最終成爲這個符號♪，而不是一個鎖。我最近學會了使用chrome的開發工具，所以在miscellaneous unicode symbols wikipedia page上，當我看到音符尖端音符之後的所有內容都沒有加載時，我進入了devtools，找到了所有符號都是的表格，並刪除了DOM中的元素。我想也許browswer一次只能加載這麼多特殊的unicode字符，但我猜這個頁面沒有刷新，所以沒有工作，要麼他們仍然顯示爲... twitter bootstrap seems to have a lock icon但它似乎是我必須爲這套圖標支付60美元...我寧願避免付錢

unicode符號不是唯一可接受的解決方案 - 我會滿意任何會使鎖符號或圖像順利地出現在html按鈕中。如果我必須更改字體，則無關緊要如果它意味着它將具有鎖定符號，那麼我可以僅爲該按鈕更改字體。也許不必要的背景信息我使用的PHP ..阿帕奇，任何字體，但通常 - verdana，tahoma，無襯線

來源

2014-10-09 J-Dizzle

自舉溶液：'

COPYLINK <跨度類= 「glyphicon glyphicon鎖」>

'' – 2015-07-06 18:19:20

字體awesome'當量：HTTP：// fortawesome。 github.io/Font-Awesome/icon/lock/ - 他們也有鎖的SVG glpyhs，* FREE * – 2015-07-24 04:43:20

bootstrap是免費的，圍繞易於使用而設計。包括一個很好的響應式網格系統。 Bootstrap不花費$'npm install bootstrap' – 2015-10-01 23:52:10

你應該能夠使用免費與bootstrap附帶的圖形。也檢查出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"; 
}

你的想法。

來源

2014-10-09 22:16:13

'f023'不是Unicode字符; U + F023是一個私人使用代碼點，這意味着Unicode標準不會分配，並且保證不會分配一個字符給它，讓私人協議使用它。私人使用字符不應該用於公共信息交換。 – 2014-10-10 06:14:50

這是基於鎖定符號的Fontawesome文檔，它聲明'unicode：f023' – 2014-10-10 13:35:25

'U + F023'確實是一個Unicode *字符*，但它不是**鎖定符號（即U + 1F512'（''），這在大多數字體中很少見）。「U + F023」位於[Unicode專用區域]（https://en.wikipedia.org/wiki/Private_Use_Areas）之一，爲非標準字符保留。FontAwesome確實看起來很棒，它將這個空間用於自己的自定義字符。 [FontAwesome的鎖圖標]（http://fontawesome.io/icon/lock/）將*僅*與FontAwesome字體一起使用。 – 2015-07-24 00:38:27

搜索一個Unicode字符是在SO外的主題，所以搜索「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，出於某種原因，即使它建議「打開」而不是「鎖定」，情況也是一樣的：支持其中一個字符的字體也支持另一個字符。）

例（採用按轉化與Fontie的Symbola字體; FontSquirrel拒絕轉換，appearently因爲使用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">

來源

2014-10-10 07:21:35

Symbola不再顯示爲從該鏈接提供，但它緩存在各種字體網站（如[FontSpace]（http://www.fontspace.com/unicode-fonts-for-ancient-scripts/symbola））中。感謝關於Fontie的提示，看起來很有趣。 – 2015-07-24 02:07:55

你可以用嵌入式做到這一點這就大大就像一個字體矢量圖像：

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 &#x1f512; secure

如果客戶端的安裝的任何字體系統有這個角色，它會被渲染，所以你只需要在上面指定一個字體，如果你擔心客戶沒有這個角色任何地方。在這種情況下，請考慮Jukka's answer。儘管如此，我更喜歡使用SVG或PNG方法來加載一種新字體，尤其是像Symbola 2.1MB（SVG爲673B或者base64 PNG爲668B）的字體。

這裏是如何將這些都看並排（SVG，PNG，Unicode）的，使用Firefox在頂部和Chrome在底部（注意，我運行Linux）：

SVG | PNG | Unicode

（注意，我沒有呈現此字符的字體）

來源

2015-07-24 02:16:44

掛鎖的Unicode字形

回答

相關問題