[Solved] Adding Font Awesome icons to an input button?

HTML-CSS
#1

I’m trying to use a button as a link. I have the following code:

<form action="http://thenerdystudent.blogspot.co.uk/">
   <input type="submit" value="My blog" />
</form>

It works well as it is, but I’d like to add an icon. I tried doing this:

<form action="http://thenerdystudent.blogspot.co.uk/">
    <input class="fa-file-text-o" type="submit" value="My blog" />
</form>

But it didn’t work. I also tried doing this:

<form action="http://thenerdystudent.blogspot.co.uk/">
    <input <i class="fa-file-text-o"></i> type="submit" value="My blog" />
</form>

But it looks like that didn’t work either. Any way that I can add them to an input button?

Thanks in advance!

1 Like
#2

You’ll want a <button> instead of an <input>. Like <button><i class="fa fa-icon"></i></button>.

1 Like
#3

I’ve done this:

<form action="http://thenerdystudent.blogspot.co.uk/">
   <button type="submit"><i class="fa fa-icon"></i>My blog</button>
</form>

The button works, but still not getting the icon.

https://giacomolaw.github.io/

#4

I chose fa-icon as a placeholder (it’s not a real icon). Take a look at the list of icons here: http://fontawesome.io/icons/

1 Like
#5

Oops, sorry about that! :sweat_smile:

#6

it is possible to add Font Awesome icons to input fields:

<input type=“submit” value="&#xf0f6 My blog" class=“fa fa-input”>

where f0f6 is the unicode for the fa-file-text-o icon

2 Likes
#7

Try setting the <input>'s font-family to FontAwesome.

#8