用字體真棒圖標替換提交按鈕

Question

我想知道如何用真棒字體圖標替換提交按鈕，我已經嘗試過了，該圖標不會顯示在按鈕上。 到目前為止，這是我所做的：

<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>

該按鈕可以正常工作，只是圖標<i class="fa fa-delete"></i>不會顯示，而只是顯示一個空白按鈕。 謝謝您的幫助！

Answer 1

我找不到fa-delete 。 我已使用fa-trash顯示垃圾桶圖標。 您只需要在代碼中包含真棒的CSS並輸入正確的類名即可。

 <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

您正在使用錯誤的Fontawesome類

將fa fa-delete類別更改為fa fa-trash 。

工作提琴

小提琴鏈接

 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

fa-delete沒有使用的圖標類。請使用現有的類。 供參考，請使用這些鏈接。 https://www.w3schools.com/icons/fontawesome_icons_text.asp https://www.w3schools.com/icons/fontawesome_icons_webapp.asp

否則使用類“ fa-trash-o”刪除圖標