logo标签列表

用 Font Awesome 图标替换提交按钮

htmlcss
3

我想知道如何用 Font Awesome 图标替换提交按钮，我已经尝试过，但是图标无法显示在按钮上。目前为止，我已经完成了以下步骤：

<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>
创建一个 Fiddle - selvakumar
将该类放置到“button”而不是“i”元素中。您也没有提供CSS。 - nelek
@nelek i 元素上使用 fa 类是可以的。Preston，你是否已经包含了 Font Awesome 的 CSS？https://www.bootstrapcdn.com/fontawesome/ - disinfor
@disinfor，是的，我的错 :-/ - nelek
现在它正在工作，我只是拼错了图标“fa fa-delete”，而不是“fa fa-trash-o”，我的错 @nelek - Ariando
1
现在它可以工作了，我只是拼错了图标“fa fa-delete”，应该是“fa fa-trash-o”，我的错 @disinfor - Ariando
3个回答
10

我找不到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>

3

您正在使用错误的fontawesome类

将fa fa-delete的类更改为fa fa-trash。

有效的fiddle链接

fiddle链接

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>

实际上，fa fa-delete应该可以工作，因为它是fa fa-trash的别名。所以可能是他/她的导入有问题。 - petur
1
可能吧，但现在fontawesome没有任何删除类。 - LKG
1
啊，你说得对。我只是在网站上搜索了“delete”，但那只是搜索别名...谢谢您先生。 - petur
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接