CODEWITHSUNDEEP
htmlcssmaterialize
Klaess Turbolent
Klaess Turbolent

Reputation: 31

Font awesome icon inside of materialize input

I am trying to put a font awesome icon inside the materialize text input, but to no luck. I dont mean regularly like they show on their website.

I mean like this:

IMAGE

Current Code:

            <div class="row" style="margin-top: 0px !important; margin-bottom: 0px !important; padding: 0px !important;">
            <div class="input-field col s12" style="margin-top: 0px !important; margin-bottom: 0px !important; padding: 0px !important;">
            <span style="right:8px;top:10px;" class="fas fa-user"></span>
            <input value="X (4)" id="tag" type="text" class="validate white-text" disabled">
            </div>
            <div class="input-field col s12" style="margin-top: 0px !important; margin-bottom: 0px !important; padding: 0px !important;">
            <span style="right:8px;top:10px;" class="fas fa-user"></span>
          <input value="X Coin" id="type" type="text" class="validate white-text" disabled">
            </div>
          </div>

As you can see on the image it's actually inside the materalize input since it's inside the inputs border-bottom.

This uses default materalize (my code).

How would i accomplish this? I've tried adding the font awesome besides inside of the input field div but it wont align besides it. Or inside it.

Thanks for reading.

Regards.

Upvotes: 1

Views: 149

Answers (2)

Samira
Samira

Reputation: 2733

you just need change position :

 <div class="position-relative">
         <div class="input-field">
             <input  type="text" />
             <label for="datepicker2">Add</label>
         </div>
         <div class="position-absolute" style="top:5px;right:0;">
          <i class="material-icons">add</i>
         </div>
    </div>

Upvotes: 1

cursorrux
cursorrux

Reputation: 1456

Get the desired effect by using only css properties to look-a-like structure.

body {
  background-color: #4a647b;
}
input {
  background: none;
  border: none;
  color: #d1cfd9;
  padding: 5px;
}
.input-field {
  border-bottom: 1px solid #d1cfd9;
}
.fa {
  color: #d1cfd9;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="row" style="margin-top: 0px !important; margin-bottom: 0px !important; padding: 0px !important; width: 200px">
  <div class="input-field col s12" style="margin-top: 0px !important; margin-bottom: 0px !important; padding: 0px !important;">
    <span style="right:8px;top:10px;" class="fa fa-user"></span>
    <input value="X (4)" id="tag" type="text" class="validate white-text" disabled>
  </div>
            
  <div class="input-field col s12" style="margin-top: 0px !important; margin-bottom: 0px !important; padding: 0px !important;">
    <span style="right:8px;top:10px;" class="fa fa-user"></span>
    <input value="X Coin" id="type" type="text" class="validate white-text" disabled>
  </div>
</div>

View on Codepen

Also there is syntax error on your input element.

Change this :

<input value="X (4)" id="tag" type="text" class="validate white-text" disabled">

to :

<input value="X (4)" id="tag" type="text" class="validate white-text" disabled>

Upvotes: 0

Related Questions