How to get the sqrt symbol in a buttons value? - css

Question

im trying to get the sqrt symbol to display inside my button. I cant seem to get it to work. Here is my button code
<input type="button" id="sqrt" value="sqrt" onclick="insert function here">
We the value, i need to get the sqrt symbol to show up and I cant seem to figure out how.

Answer 1

If you need to find a specific symbol you can refer to W3's Character Entity Reference Chart.
The Square Root (√) symbol can be displayed using one of the following:
√
√
√
√
For example:
<input type="button" value="√" /> <!-- or... -->
<input type="button" value="&Sqrt;" /> <!-- or... -->
<input type="button" value="√" /> <!-- or... -->
<input type="button" value="√" />
Personally I'd opt for either √ or √ as these directly reference the symbol's Unicode ID. A browser may not necessarily have any mapping defined for √ or &Sqrt;.
JSFiddle demo.

Answer 2

Use √:
<input class="sqrt-input" type="submit" value="√" />
Change the font if you don't like the default look:
/* If find Verdana pretty good for this and it's available
on almost every browser. */
.sqrt-input {
font-family: Verdana;
}

Answer 3

The simplest way is to use the character itself:
<input type="button" id="sqrt" value="√" onclick="...">
You then need to make sure that the character encoding is utf-8 and this is declared in HTTP headers, but you should do that anyway.

Answer 4

Use an img tag inside a button tag like this :-
<button TYPE="submit" >
<img src="" >
</button>
Here put the path of your image in the src attribute. You can also add hieght and width properties to define size for your button and attributes like align="absmiddle" to position image in middle of the button.
for example
<button TYPE="submit" >
<img style="height:25px;width:65px;" src="http://2.bp.blogspot.com/_0agwm6I7YZE/TO_DccbrDBI/AAAAAAAAMEU/0OADo56Xqxw/s1600/square-root.jpg" align="absmiddle" >
</button>