CODEWITHSUNDEEP
cssw3.css
kxtronic
kxtronic

Reputation: 351

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

I would like to have icons instead of text on the submit buttons in the forms of my website based on w3.css.

I can easily add icons to other buttons but not to the submit buttons.

This is how far I could come:

enter image description here

The blue "save" button is the submit one. The green cancel button is a separate button that provides me a way to "cancel" (go back) via an href. I would like the submit button to look like the green save button, but alas I haven't found a way to replace the "save" text with a save icon (with no text).

I'm using google material icons but could use FontAwesome as well. Here's my html code:

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

Any suggestons will be welcome :-)

Upvotes: 0

Views: 3345

Answers (2)

Keutelvocht
Keutelvocht

Reputation: 688

Replace 

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

with 

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

Upvotes: 1

V. Alen
V. Alen

Reputation: 88

You can use button for that, just wrap it in form and add action="#" to go to your page.

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

Upvotes: 1

Related Questions