Unicode Glyph for Padlock

Question

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

Answer 1

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