CODEWITHSUNDEEP
cssglyphicons
VirtualLife
VirtualLife

Reputation: 402

Aligning icon class

As you can see by the image. The icon sits high. Any margin or padding I seem to try moves the text box down with it. With it positioned extra high, it also pushed the search text up. Any suggestions on how to fix?

I just want the search icon to be the same height and even with the search box and not mess with the label text.

enter image description here

.icon-btn {
  padding: 0;
  margin: 0;
  display: inline-block;
  height: 26px;
}
.icon-magnifier-dark:before {
  background-color: white;
  border: solid;
  content: "\e035";
  color: @color-light;

font-family: outlinedFont;
  font-style: normal !important;
  font-size: 20px;
  line-height: 1;
  box-sizing: border-box;
}

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
  <label for="Search" style="">Search</label>

  <input type="text" name="Search" id="Search" size="10" style="" />
  <a class="icon-btn" href="#" style="">
    <i class="icon-magnifier-dark" style=""></i>
  </a>
</div>

Upvotes: 0

Views: 72

Answers (3)

Rohit Kumar
Rohit Kumar

Reputation: 2031

I think some other CSS might be overriding or changing the aligning, so you should check your full CSS once. I checked your JSFiddle which you provided in comment on one of the answer, I saw the aligning was OK in the Fiddle.

Upvotes: 1

Sarower Jahan
Sarower Jahan

Reputation: 1495

You made it so difficult. Please Check this code below...

HTML:

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
  <label for="Search" style="">Search</label>

  <input type="text" name="Search" id="Search" size="10" style="" />
  <a class="icon-btn" href="#" style="">
    <i class="icon-magnifier-dark" style=""></i>
  </a>
</div>

Css:

.icon-btn {
     display: inline-block;
    width: 26px;
    height: 26px;
    background-color: red;
    text-align: center;
    padding:5px;
    padding: 3px;
    box-sizing: border-box;
}
.icon-magnifier-dark:before {
   content: "\e035";
   font-family: outlinedFont;
   font-style: normal;
}

input[type="text"]{
    width:150px;
    height:26px;
    vertical-align:top;
    box-sizing: border-box;
    margin-right: -5px;
}

Check the demo on jsfiddle

Upvotes: 0

Arshid KV
Arshid KV

Reputation: 10037

change font-size 

font-family: outlinedFont;
  font-style: normal !important;
  font-size: 15px;
  line-height: 1;
  box-sizing: border-box;
}

Upvotes: 0

Related Questions