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.