I have the button below and what I want is that instead of the name "Go", I can use an image, be it in SVG or even something of Awesome Font. How to proceed in this case?
Thank you in advance!
input {background:#B80000; color:#fff; font-size:13px; height:27.7px!important; margin:0 3px; width:15%; font-family:Segoe UI; text-transform:uppercase; border:none}<input class='follow-by-email-submit' type='submit' value='Ir'/> On a button using input you will not achieve this. Instead of input , use button , because it supports other types of elements.
Then you can use font-awesome to add an icon to the button:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<button class='follow-by-email-submit'>
<i class="fa fa-arrow-right"></i>
</button>Or you can use any image:
<button class='follow-by-email-submit'>
<img height="30" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"/></button>Andyoudonotneedtoincludethe
type="submit"attribute withbutton. By default it is already typesubmit.
Edit: Another option, which by the way is even more semantic, would be to put SVG in <label> , doing so:
label {
position: relative;
}
label:before {
content: "";
position: absolute;
left: 10px;
top: 0;
bottom: 0;
width: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill-rule='evenodd'%3E%3Cpath d='M16.036 18.455l2.404-2.405 5.586 5.587-2.404 2.404zM8.5 2C12.1 2 15 4.9 15 8.5S12.1 15 8.5 15 2 12.1 2 8.5 4.9 2 8.5 2zm0-2C3.8 0 0 3.8 0 8.5S3.8 17 8.5 17 17 13.2 17 8.5 13.2 0 8.5 0zM15 16a1 1 0 1 1 2 0 1 1 0 1 1-2 0'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
}
input {
padding: 10px 30px;
}<label>
<input type="button" value="Entrar">
</label>I'll give a different answer than the one you have in the question marked as duplicate, because I believe it will suit you better.
First for awareness: Not all <input> accepts pseudo element ::after and ::before as you can see in this question. // pseudo elements :: after and: : before they work on what input types
So for the example I'm going to use <button>
Now the technique using content of pseudo element ::after to put the Font Awesome symbol that you want.
See the example below:
.awesome {
position: relative;
padding: 10px;
background-color: brown;
width: 100px;
height: 40px;
border: none;
cursor: pointer;
}
.awesome::after {
content: "\f00c";
font-family: FontAwesome;
color: #fff;
font-size: 18px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 250ms ease-in-out;
}
.awesome:hover::after {
font-size: 24px;
content: "\f1b9";
font-family: FontAwesome;
}<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<button class="awesome"></button> OBS1: To use Font Awesome in content:"" you need to use the Unicode value of the character, using the default Font Awesome class will not work.
You can use IMG within the TAG button :
<form name="sender" method="get">
<button><img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/x11.svg"/></button></form>IfBUTTONdoesnotworkasSUBMITyoucanuseJAVASCRIPT:
<buttononclick="document.sender.submit()"><img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/x11.svg"/></button>Ifit'sanSVGdesignedbyHTML:
<button><svg width="64" height="64">
<circle cx="32" cy="32" r="20" stroke="green" stroke-width="2" fill="yellow" />
</svg></button>Remember that the X and Y position of the circle has to be half the width and height of the SVG to center, with R being the dimensional size of it.