Floating Label Input Field with Icon

ionic-v1
1

I am wondering what the correct way is to add input icons when using the floating label inputs. I saw this when looking at the ionic view app over the weekend and would love to incorporate the same design in my app, however, can not seem to get things to play nice.

What I am attempting to emulate: http://ionicframework.com.s3.amazonaws.com/blog/beta4-keyboard.png

My attempt: http://codepen.io/jpmckearin/pen/xbraQr?editors=101

CLARIFICATION: Floating Labels, not typical labels. Please see http://ionicframework.com/docs/components/#forms-floating-label

2 
<label class="item item-input">
    <i class="icon ion-email placeholder-icon"></i>
    <input type="email" placeholder="Email" ng-model="user.email">
</label>
<label class="item item-input">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="text" placeholder="Search">
</label>
3

This isn’t what I was looking for. You showed a basic example with typical labels. I was asking for an example of usage with the floating labels. Please see http://ionicframework.com/docs/components/#forms-floating-labels

4

It is possible to get this effect, with some custom css

7 Likes
5

Will this effect be included in the final release of ionic 1.0.0?

I think, it must be

6

Probably not, a lot bigger fish to fry :smile:
But feel free to use it as you want.

7

Thanks @mhartington. Looks great!

8

Thanks! Very useful!