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?
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.
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'
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"].
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
Related
I have seen a few websites that use the content attribute of a before/after pseudo element to set a picture as the content. The rule looks something like this:
:before {
content: "\e91b";
}
But then it is rendered as an image. I believe it is this setting because I can replace that escaped character with fooBar for instance and the image changes to that. And replacing the content will change it back. Changing the colour attribute changes the colour of the image so I'm guessing it is defined with some SVG data somewhere. These are obviously custom set characters because it will be set to the company's logo or other random things.
I'm honestly stumped on how this can be done and Google searching revealed nothing, though I'm not entirely sure what to search for. Everything I found referred to standard ISO characters that can be used in the escaped manner for easier typing/dev work.
Any help on this would be greatly appreciated.
It's called CSS pseudo elements, take a look at: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements.
I want to make a submit button like
<input type="submit" value="→"/>
however I am not confident in the user having a font installed that covers →. I would like to use text where possible so that it is more consistent with the rest of the page, but replace the text with an image of an arrow when necessary.
Is there a way to test whether a glyph for a particular character is available?
No, there is no such mechanism in HTML – you can specify a text alternative to an image (via the alt attribute in an img element), but not vice versa.
In practice, with a character like “→”, the main problem is not the presence of glyphs (it is hard to find a computer that does not have any font that covers “→”), but their quality. In many fonts, “→” is thin and small, thus unsuitable for use in a button. In some fonts, like Calibri, it is oddly shaped. And it is not that useful to try to make the character match the rest of the page typographically, since here “→” would be used as a standalone symbol rather than a text character.
Thus, it is probably best to use an image, e.g.
<button type=submit><img src=arrow.png alt=Forward></button>
If you look at this project you should be able to write the arrow and if the div width/height is the wrong size then assume the font doesn't exist, or use the code for a specific font and if that doesn't exist then use your image
http://www.lalit.org/lab/javascript-css-font-detect/
It can be done with javascript but not html.
Try this:
<input type="submit" value="→"/>
I am developing an app where users can choose the URL of their profile, ala facebook.com/name. Everything worked out fine, except I'm having styling issues adding a static set of text inside the input, to help convey the message of having your own URL.
Here's what I want the input to look like when the user is visiting the page:
And here's what I want it to look like when they add their own input:
Half of this problem is easy, I can just set a large left-padding to the input, get it to display hover effects regardless of where the mouse is and place the input accordingly. But the issue is getting the text into the input line without breaking the styling around it (and preventing the user from being able to select the static text, so that even clicking the static text will "focus" the input field behind it).
I'd really prefer to use pure HTML/CSS, but could use Javascript if it's a must.
Here's where I am now, the goal is to bring the "www.website.com" text into the input field without breaking the styling of the textarea to follow: http://jsfiddle.net/rUkS8/1/
Thanks and sorry for such a long description!
Why not bypass the problem and simply have that static text outside of the input?
www.website.com/<input type="text" name="url" />
This degrades nicely in older/brain dead browsers, works when javascript is disabled, and makes it obvious where the seperate of inputs is.
If you use a label and the for attribute, it will handle the click events for you:
<div style="border:1px solid #000;">
<label for="textinput" style="cursor:text;">asdf</label>
<input type="text" id="textinput">
</div>
If you click on the label, it will send the focus to the input. Putting cursor:text; adds to the effect. All you have to do is play games with size and border and you're all set.
How can I show an image as a tool tip in my web page. I want my tool tip in a custom image, rather than the usual one. I tried defining a class to hold the image and added the class to the anchor element, but I did not get the image. Someone help me.
My css:
.bubbleText{
background:transparent url(../images/static/link_hover_M_120.png) no-repeat;
}
.questionIcon{
background: url(../images/static/question2.png) no-repeat;
text-decoration:none;
}
My html code:
<a title="Your Contact number" href="#" class="questionIcon bubbleText"> </a>
The questionIcon class hold a 'question mark' image. On hovering on the question mark, I need the tool tip to be displayed inside the image. The image is just a white box with borders.
If you mean you want to style the tooltip you'll need to use javascript to create the functionality. What script you use depends on what JS framework you're using, if any.
There's a big list of tooltips on this site : http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/
Uses different frameworks, so pick the one that works for you.
I would use a common library like jQuery. There are a lot of running examples: http://jquery.bassistance.de/tooltip/demo/
Browsers don't support rich tooltips but it can still be done
The easiest way is to use some plugin (if you're using something like jQuery) that provides rich tooltips functionality. Browsers can only display text that's defined in alt attribute (of image elemnt) or title attribute in any other HTML element (including image).
This will get you started on jQuery tooltip plugins.
I have seen the following snippet of UI code to use icons with labels
<a href="">
<img alt src="img/save.gif" class="icon">
<span>Save</span>
</a>
OR
would it make sense to make combine this into a single entity (i.e. image icon plus the label).
My concern is if we choose a different theme (color scheme), then I will not be able to use different colors for my labels and might have to regenerate the image. Using the first approach gives me the flexibility to do so.
I dont know about the layout or the colors you are using but the following are my points:
Relative alignment between the image and the text can be difficult to acheive (with my basic HTML/CSS knowledge) when you have the two separately
You cay that you prefer to have them separate because you want the possibility to change the color of text during "color scheme changes". But are you sure you dont want to change the images as well (another set of icons)? You might have the same problem of color mismatches. (You might choose the icons in such a manner that they "go along" with all the color schemes of your site, then again you can choose the color of your labels in the same menner).
Again, I am not sure of the layout/colors you are choosing, so the definitive answer is (as always) "depends on your site"
Consider hyperlink cues for common link icons. For example:
html
View Holidays
CSS
a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}
Styling of each can be handled in CSS. Works for just about every file type extension out there. This might not work for your specific example (would have to see the larger context) but it's a great trick for download links, etc.