Want special private character to use in input field

Question

I thought this would be easy, but clearly it takes someone smarter than me to do this. My project as a special currency symbol to use instead of $. We have been using it as a tiny image and imbedding it with <img>. But, cannot use it in an <input> field. In particular want to make it part of the button text in a type=submit <input> field.

I have read a lot, but not understanding what makes sense to do this. I created a private character using Windows Private Character editor, but I need a way for html to render it for me in an <input> field.

I was reading about <glyph-data> and also icon fonts. I had this feeling (just a feeling) that icon fonts might do this for me, but it looked like quite an investment in time to get it done.

Can anyone suggest an approach for this that makes sense?

I mean, is your currency symbol one of [these](http://www.fileformat.info/info/unicode/category/Sc/list.htm)? — Walter Tross, Dec 18 '15 at 18:34
It's an unique "currency" used to represents credits in our App so none of the existing symbols work for us, but thanks for the reference Walter. — Jim Mc, Dec 19 '15 at 21:26

score 1 · Answer 1 · edited May 23 '17 at 11:52

1

You can use and image or an icon in a button, here is a good example of how to do it - Font-awesome, input type 'submit'

edited May 23 '17 at 11:52

Community

1
1

answered Dec 18 '15 at 18:30

haakon.io

477
6
19

score 1 · Answer 2 · answered Dec 18 '15 at 18:32

Creating a special character is nothing more than creating a logo or something similar. You need to export this symbol to SVG and use it either as embedded SVG or an icon font (I suggest http://fontello.com/).

Also, please note that if you only want to use it in a button, you can use <button> tag, like this:

<button type="submit"><img src="your/image.png" alt="currency"></button>

It will work just like input[type="submit"].

score 1 · Accepted Answer · answered Dec 18 '15 at 18:45

There already is common currency sign: ¤ (¤ or ¤). I'd advise to get your desired "private image" in SVG format, visit IcoMoon web application, upload it there, generate webfont while assigning the corresponding character point 00a4. By this you'll get backwards compatible representation of common currency sign with alternative shape of your will.

score 0 · Answer 4 · answered Dec 18 '15 at 18:32

You can set the background image of a button (or any input field really).

#submitButton {
  background-image: url('/link/to/image');
  background-position: left center;
  padding-left: 12px; /* or whatever your image width is */
}

The above CSS assumes you are putting additional text in the submit button

<input type="submit" id="submitButton" value="Some text"/>

If you don't put any text and only want to use the image, you can just set the background position to center center and remove padding-left

Want special private character to use in input field

4 Answers4