w3.css用圖標代替文本提交按鈕？

我想在我的網站的形式提交按鈕的基礎上w3.css有圖標，而不是文本。w3.css用圖標代替文本提交按鈕？

我可以很容易地將圖標添加到其他按鈕，而不是提交按鈕。

這是多遠我能來：

藍色的「保存」按鈕提交一個。綠色取消按鈕是一個單獨的按鈕，爲我提供了一種通過href「取消」（返回）的方式。我希望提交按鈕看起來像綠色的保存按鈕，但是我還沒有找到一種方法來用保存圖標（不帶文本）替換「保存」文本。

我使用谷歌材質圖標，但也可以使用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>

任何suggestons將受到歡迎:-)

來源

2017-09-01 kxtronic

更換

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

來源

2017-09-01 09:38:18 Keutelvocht

完美！我也可以省略「w3-bar-item」。謝謝！ – kxtronic

您可以使用按鈕的是，僅僅把它包裝形式，並添加行動=「＃」去你的頁面。

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

來源

2017-09-01 09:34:20

我想這一個，也能正常工作！ – kxtronic

w3.css用圖標代替文本提交按鈕？

回答

相關問題