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来显示垃圾桶图标。您只需要在代码中包含font-awesome 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。

工作小提琴

<强> fiddle link

＆＃13;

button {
  background:tomato;
}

＆＃13;

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

＆＃13;

Answer 3

您使用的图标类没有 fa-delete 。使用存在的类。供您参考，请使用这些链接。 https://www.w3schools.com/icons/fontawesome_icons_text.asp https://www.w3schools.com/icons/fontawesome_icons_webapp.asp

否则使用class＆＃34; fa-trash-o＆＃34;删除图标

用字体真棒图标替换提交按钮

3 个答案: