gpt4 book ai didi

css - w3.css 提交按钮带有图标而不是文本?

转载 作者:太空宇宙 更新时间:2023-11-04 01:37:11 25 4
gpt4 key购买 nike

我希望在基于 w3.css 的网站表单中的提交按钮上使用图标而不是文本。

我可以轻松地将图标添加到其他按钮,但不能添加到提交按钮。

这是我能走多远:

enter image description here

蓝色的“保存”按钮是提交按钮。绿色的取消按钮是一个单独的按钮,它为我提供了一种通过 href 来“取消”(返回)的方法。我希望提交按钮看起来像绿色的保存按钮,但遗憾的是我还没有找到用保存图标(没有文本)替换“保存”文本的方法。

我正在使用谷歌 Material 图标,但也可以使用 FontAwesome。这是我的 html 代码:

<html>
<title>FPP</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<head>
<link type="text/css" rel="stylesheet" href="/stylesheets/w3.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="w3-container">
<header class="w3-container w3-blue">
<h1>Test</h1>
</header>
<div class="w3-bar w3-gray">
<a href="/" class="w3-bar-item w3-button w3-gray"><i class="material-icons">home</i></a></button>
</div>
<br>
<form class="w3-container w3-card-8" action="/test" method="post">
<label class="w3-text-blue"><b>Test ID</b></label>
<input value="" name="test1" class="w3-input w3-border">
<br>
<label class="w3-text-blue"><b>Test Description</b></label>
<input value="" name="test2" class="w3-input w3-border">
<br>
<input class="w3-btn w3-blue" type="submit" value="save">
<a href="/" class="w3-bar-item w3-button w3-green"><i class="material-icons">save</i></a>
<a href="/" class="w3-bar-item w3-button w3-green"><i class="material-icons">cancel</i></a>
</form>
</div>
</body>
</html>

欢迎任何建议:-)

最佳答案

替换

<input class="w3-btn w3-blue" type="submit" value="save">

<button type="submit" class="w3-bar-item w3-button w3-green"><i class="material-icons">save</i></button>

关于css - w3.css 提交按钮带有图标而不是文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45996725/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com