Replace submit button with font awesome icon

Question

I want to know how to replace submit button with font awesome icon, I already tried it myself and the icon won't show up on the button. Here is what I have done so far :

<form action="{{route('destroycourse', $course->id)}}" method="POST">
   <input type="hidden" name="_method" value="DELETE">
   <input type="hidden" name="_token" value="{{ csrf_token() }}" />
   <li><a class="tooltips" data-toggle="tooltip" data-placement="top" title="Delete">
          <button type="submit" onclick="return confirm('Are you sure to delete this course ?');" style="border: 0; background: none;">
            <i class="fa fa-delete"></i>
          </button>
       </a>
   </li>
</form>

The button works just fine only the icon <i class="fa fa-delete"></i> won't show up and it's just showing a blank button. Thanks for the help!

Answer 1

I couldn't find fa-delete. I have used fa-trash to display trash icon. You just need to include the font-awesome css in your code and correct class name.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<form action="{{route('destroycourse', $course->id)}}" method="POST">
   <input type="hidden" name="_method" value="DELETE">
   <input type="hidden" name="_token" value="{{ csrf_token() }}" />
   <li><a class="tooltips" data-toggle="tooltip" data-placement="top" title="Delete">
          <button type="submit" onclick="return confirm('Are you sure to delete this course ?');" style="border: 0; background: none;">
            <i class="fa fa-trash-o" aria-hidden="true"></i>
          </button>

       </a>
   </li>
</form>

Answer 2

You are using wrong class of fontawesome

change class of fa fa-delete to fa fa-trash.

Working fiddle

fiddle link

button {
  background:tomato;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button type="submit"><i class="fa fa-trash"></i>Submit</button>