Question

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

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

这是我能走多远：

蓝色＆＃34;保存＆＃34;按钮是提交的。绿色取消按钮是一个单独的按钮，为我提供了一种取消＆＃34;取消＆＃34; （回去）通过href。我希望提交按钮看起来像绿色保存按钮，但是我还没有找到替换＆＃34;保存＆＃34;的方法。带有保存图标的文本（没有文字）。

我使用谷歌素材图标，但也可以使用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使用图标而不是文本提交按钮？

2 个答案: