I need to use a unicode character that looks like a padlock. It's for a button below a form that says "CopyLink __" with a padlock on it, to indicate that when they copy the link of the page they are on, the person going to the "copylink _" version of the page will not be able to modify the form.
Anyway, I've looked around -- this page has a lot of miscellaneous unicode symbols, but after the the musical sharp note the rest of the symbols do not load. this link says that I should be able to generate a padlock symbol with ALT+1F513 .. which ends up being this symbol ♪, not a lock. I've learned to use chrome's devtools recently, so on the miscellaneous unicode symbols wikipedia page, when I saw that everything after the musical sharp note was not loading I went into devtools, found the table where all the symbols were, and deleted elements from the DOM. I thought maybe the browswer could only load so many of the special unicode characters at once, but I guess the page didn't refresh, so that didn't work either they still showed up as 🔓 ... twitter bootstrap seems to have a lock icon but it seems like I have to pay $60 for the set of icons... I'd rather avoid paying money
A unicode symbol is not the only acceptable solution -- I'd be satisfied with anything that will make a lock symbol or image appear smoothly into a html button. Doesn't matter if I have to change the font I can change the font for just the button if it means It'll have a lock symbol. Perhaps unneccessary background information I'm using PHP.. apache, any fonts but typically -- verdana, tahoma, sans-serif
You should be able to use the glyphicon that ship with bootstrap for free. Also check out Fontawesome
If you decide to use Fontawesome, the unicode character is f023. Or if you include the CSS files you can add the fa-lock class to an <i> tag.
<button type="button"><i class="fa fa-lock"></i></button>
Alternatively, you could specify the font-family in your CSS file after including and importing the fonts into your CSS file.
For instance:
.your-element:before {
font-family: "FontAwesome";
content: "\f023";
}
You get the idea.
Searching for a Unicode character is off-topic at SO, and so is searching for a “Unicode glyph”, whatever that might mean.
Interpreting the question as asking for a way to include a padlock symbol in an HTML document, there is a simple answer: If there is a Unicode character that corresponds to what you want, use it if this turns out to be feasible enough; if not, use an image, created in sufficiently large size and scaled down to the font size used with CSS. The feasibility depends mainly on fonts. For general information, see my Guide to using special characters in HTML.
In this case, assuming that your search for a suitable Unicode character finds LOCK U+1F512 suitable in principle, you would in practice need to use a downloadable font via @font-face. The only fonts that support it, among fonts normally installed on people’s computers, are Segoe UI fonts, which are available on fairly new versions of Windows only. However, you can put those fonts first in your font-family list, to avoid downloading a font when it is not needed.
(If you would prefer OPEN LOCK U+1F513, for some reason, even though it suggests “open” rather than “locked”, the situation is the same: fonts that support one of these characters support the other as well.)
Example (uses the Symbola font as converted with Fontie; FontSquirrel refused to convert, appearently because Symbola is over 2 megabytes):
<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>🔒</span>
However, this might be overkill when you just want one icon. It is simpler to use just an image, perhaps starting from a LOCK glyph in a free font in large size, taking a screen capture, and then using just an img element:
<img src=lock.png alt=Locked style="height: 0.8em">
You can do this with an embedded vector image that scales just like a font:
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.
(Note, I cheated; to make it smaller, I removed the xmlns attribute and a few other elements that, to my untrained SVG eye, appear to be unnecessary.)
You can also embed it as an image with the 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.
Finally, as noted in another answer, you can use the official Unicode lock character:
This text is 🔒 secure
If any font installed on the client's system has this character, it will be rendered, so you only need to specify a font above if you're worried about the client not having this character anywhere. In that case, consider Jukka's answer. Still, I prefer the SVG or PNG methods to actually loading a new font, especially one as big as Symbola's 2.1MB (versus 673B for the SVG or 668B for base64 PNG).
Here is how those all look side by side (SVG, PNG, Unicode), with Firefox on top and Chrome on the bottom (note, I run Linux):
(Note, I don't have a font that renders this character.)
来源：https://stackoverflow.com/questions/26288572/unicode-glyph-for-padlock