Positionierung Eingabeplatzhalter mit Symbol in der Mitte

Question

Ich entwickle eine ionische Anwendung mit ionischen Komponente.

<div class="bar bar-header item-input-inset"> 
    <label class="item-input-wrapper"> 
    <i class="icon ion-ios-search placeholder-icon"></i> 
    <input type="search" placeholder="Search"> 
    </label> 
    <button class="button button-clear"> 
    Cancel 
    </button> 
</div> 

Ich bin in der Lage, den Platzhalter mit dieser CSS zu zentrieren. Allerdings befindet sich nur der Platzhalter für Text in der Mitte. Ich beabsichtige, sowohl das ionische Suchsymbol als auch den Platzhalter als Ganzes in der Mitte zu platzieren, wie das Bild unten zeigt.

Hinweis: Die Länge des Platzhaltertextes darf nicht angenommen werden. zB: Hard-Code-Pixel nach links und rechts basierend auf Textlänge.

::-webkit-input-placeholder { 
    text-align: center; 
} 

:-moz-placeholder { /* Firefox 18- */ 
    text-align: center; 
} 

::-moz-placeholder { /* Firefox 19+ */ 
    text-align: center; 
} 

:-ms-input-placeholder { 
    text-align: center; 
} 

Answer 1

Versuchen Sie das Symbol Element mit einem Pseudo-Element ersetzt:

::-webkit-input-placeholder { 
 
    text-align: center; 
 
} 
 

 
::-webkit-input-placeholder::before { 
 
    content:'\1F50D'; 
 
    padding-right: .2em; 
 
} 
 

 
:-moz-placeholder { /* Firefox 18- */ 
 
    text-align: center; 
 
} 
 

 
:-moz-placeholder::before { 
 
    content:'\1F50D'; 
 
    padding-right: .2em; 
 
}

<input type="search" placeholder="Search">

Fiddle: https://jsfiddle.net/7yxdfewq/