2017-09-01 5 views
0

私はw3.cssに基づいて私のウェブサイトのフォームの送信ボタンにテキストの代わりにアイコンを持っていたいと思います。w3.cssテキストの代わりにアイコンが付いたボタンを送信しますか?

アイコンを他のボタンに簡単に追加できますが、送信ボタンには追加できません。

これは、私が来る可能性がどこまである:

enter image description here

青色の「保存」ボタンは、いずれかを提出しています。緑色の取り消しボタンは、hrefで「取り消す」(戻る)方法を提供する別のボタンです。送信ボタンを緑色の保存ボタンのように見せたいのですが、残念ながら、「保存」テキストを保存アイコン(テキストなし)に置き換える方法が見つかりませんでした。

Googleの素材アイコンを使用していますが、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は、あなただけの形でそれをラップし、あなたのページに移動するアクション=「#」を追加し、そのためのボタンを使用することができます歓迎:-)

答えて

1

私はこの1つを試してみましたが、また正常に動作します

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

パーフェクト!そして、私は「w3-bar-item」も除外することができます。ありがとう! – kxtronic

1

になります。

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

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

を交換してください! – kxtronic

関連する問題