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). 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. You can also embed it as an image with the data: URI scheme: This is text isįinally, as noted in another answer, you can use the official Unicode lock character: This text is 🔒 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 do this with an embedded vector image that scales just like a font: This is text is ![]() 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: However, this might be overkill when you just want one icon. (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.)Įxample (uses the Symbola font as converted with Fontie FontSquirrel refused to convert, appearently because Symbola is over 2 megabytes): However, you can put those fonts first in your font-family list, to avoid downloading a font when it is not needed. 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 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. For general information, see my Guide to using special characters in HTML. 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. Searching for a Unicode character is off-topic at SO, and so is searching for a “Unicode glyph”, whatever that might mean. apache, any fonts but typically - verdana, tahoma, sans-serif Perhaps unneccessary background information I'm using PHP. 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. I'd rather avoid paying moneyĪ 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. ![]() twitter bootstrap seems to have a lock icon but it seems like I have to pay $60 for the set of icons. ![]() ![]() 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 □. 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. which ends up being this symbol ♪, not a lock. this link says that I should be able to generate a padlock symbol with ALT+1F513. 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.Īnyway, 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. I need to use a unicode character that looks like a padlock.
0 Comments
Leave a Reply. |