[英]Replace submit button with font awesome icon
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. 该按钮可以正常工作,只是图标
<i class="fa fa-delete"></i>
不会显示,而只是显示一个空白按钮。 Thanks for the help! 谢谢您的帮助!
I couldn't find fa-delete
. 我找不到
fa-delete
。 I have used fa-trash
to display trash icon. 我已使用
fa-trash
显示垃圾桶图标。 You just need to include the font-awesome css in your code and correct class name. 您只需要在代码中包含真棒的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>
You are using wrong class of fontawesome 您正在使用错误的Fontawesome类
change class of fa fa-delete
to fa fa-trash
. 将
fa fa-delete
类别更改为fa fa-trash
。
Working 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>
there is no such a class for icon that you are using is fa-delete .use the classes which are present. fa-delete没有使用的图标类。请使用现有的类。 for your reference, use these links.
供参考,请使用这些链接。 https://www.w3schools.com/icons/fontawesome_icons_text.asp https://www.w3schools.com/icons/fontawesome_icons_webapp.asp
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 否则使用类“ fa-trash-o”删除图标
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.