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> 

Answer 3

there is no such a class for icon that you are using is fa-delete .use the classes which are present. for your reference, use these links. https://www.w3schools.com/icons/fontawesome_icons_text.asp https://www.w3schools.com/icons/fontawesome_icons_webapp.asp

else use class "fa-trash-o" for delete icon