w3.css 使用图标而不是文本提交按钮？

Question

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

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

这是我能走多远：

蓝色的 "save" 按钮是提交按钮。绿色的取消按钮是一个单独的按钮，它为我提供了一种通过 href "cancel"（返回）的方法。我希望提交按钮看起来像绿色的保存按钮，但是我还没有找到用保存图标（没有文本）替换 "save" 文本的方法。

我正在使用 google 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>

欢迎任何建议:-)

Answer 1

您可以为此使用按钮，只需将其包装在表单中并添加 action="#" 即可转到您的页面。

<form action="gothere.html"> 
    <button type="submit" class="w3-btn w3-blue">
      <i class="fa fa-id-badge" aria-hidden="true"></i>
    </button>
</form>

Answer 2

替换

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

w3.css 使用图标而不是文本提交按钮？

w3.css submit button with an icon instead of text?

css

w3.css