Czy można użyć ikony Font Awesome w symbolu zastępczym? Czytałem, że HTML nie jest dozwolony w symbolu zastępczym. Czy jest w pobliżu praca?
placeholder="<i class='icon-search'></i>"
Czy można użyć ikony Font Awesome w symbolu zastępczym? Czytałem, że HTML nie jest dozwolony w symbolu zastępczym. Czy jest w pobliżu praca?
placeholder="<i class='icon-search'></i>"
Nie możesz dodać ikony i tekstu, ponieważ nie możesz zastosować innej czcionki do części symbolu zastępczego, jednak jeśli jesteś zadowolony z samej ikony, może to działać. Ikony FontAwesome są tylko znaki z niestandardową czcionkę (można spojrzeć na FontAwesome Ściągawka dla uciekł znak Unicode w content
regule. W mniejszym kodu źródłowego to znaleźć w variables.less Wyzwaniem byłoby zamienić czcionki, gdy wejście jest nie jest pusty. Połącz to z jQuery w ten sposób .
<form role="form">
<div class="form-group">
<input type="text" class="form-control empty" id="iconified" placeholder=""/>
</div>
</form>
Z tym CSS:
input.empty {
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
I to (proste) jQuery
$('#iconified').on('keyup', function() {
var input = $(this);
if(input.val().length === 0) {
input.addClass('empty');
} else {
input.removeClass('empty');
}
});
Jednak przejście między czcionkami nie będzie płynne.
font-family: Font Awesome\ 5 Free;
nie działa. Musiałem użyć tylkofont-family: FontAwesome;
font-family: 'Font Awesome 5 Pro', 'Montserrat';
do pola wyszukiwania i zadziałało to urocze.Jeśli używasz
FontAwesome 4.7
tego, powinno wystarczyć:Listę kodów szesnastkowych można znaleźć w ściągawce Font Awesome . Jednak w najnowszym FontAwesome 5.0 ta metoda nie działa (nawet jeśli używasz podejścia CSS w połączeniu z zaktualizowanym
font-family
).źródło

wartość? Mam na myśli, jak idziesz odicon-search
do
?id="iconified"
prostu dodawać,class="fa"
a font awesome zajmie się css za Ciebie.<input type="text" placeholder=" Search Blog" style="font-family: FontAwesome, Arial; font-style: normal">
. W przeciwnym razie był wyświetlany symbol zawierający „fl”.Rozwiązałem tą metodą:
W CSS użyłem tego kodu dla klasy fontAwesome :
W HTML dodałem klasę fontawesome i kod ikony fontawesome wewnątrz elementu zastępczego:
Możesz zobaczyć w CodePen .
źródło
input[type="text"]::placeholder { text-align: right; font-family: Roboto, 'Font Awesome\ 5 Pro', sans-serif; font-weight: 600; }
Odpowiedź @ Elli może działać w FontAwesome 5, ale wymaga użycia prawidłowej nazwy czcionki i użycia określonego CSS dla żądanej wersji. Na przykład podczas korzystania z FA5 Free nie mogłem go uruchomić, jeśli załączyłem all.css, ale działało dobrze, jeśli dołączyłem solid.css:
W przypadku FA5 Pro nazwa czcionki to „Font Awesome 5 Pro”
źródło
Jeśli jest obsługiwany, możesz użyć
::input-placeholder
pseudoselektora w połączeniu z::before
.Zobacz przykład na:
http://codepen.io/JonFabritius/pen/nHeJg
Właśnie nad tym pracowałem i natknąłem się na ten artykuł, z którego zmodyfikowałem ten materiał:
http://davidwalsh.name/html5-placeholder-css
źródło
Używam Ember (wersja 1.7.1) i potrzebowałem zarówno powiązać wartość danych wejściowych, jak i mieć symbol zastępczy, którym była ikona FontAwesome. Jedynym sposobem na powiązanie wartości w Ember (o którym wiem) jest użycie wbudowanego pomocnika. Ale to powoduje, że symbol zastępczy jest zmieniany, po prostu pojawia się „& # xF002”, tekst.
Jeśli używasz Ember lub nie, musisz ustawić CSS symbolu zastępczego wejścia, aby mieć rodzinę czcionek FontAwesome. To jest SCSS (używający Bourbon jako zastępczego stylu ):
Jeśli używasz tylko kierownic, jak wspomniano wcześniej, możesz po prostu ustawić encję HTML jako symbol zastępczy:
Jeśli używasz Ember, powiąż symbol zastępczy z właściwością kontrolera, która ma wartość Unicode.
w szablonie:
na kontrolerze:
A wiązanie wartości działa dobrze!
źródło
Użyj
placeholder=""
w swoim wejściu. Możesz znaleźć Unicode na stronie FontAwesome http://fontawesome.io/icons/ . Ale musisz dodaćstyle="font-family: FontAwesome;"
swoje dane wejściowe.źródło
Robię to, dodając
fa-placeholder
klasę do tekstu wejściowego:<input type="text" name="search" class="form-control" placeholder="" />
więc w css po prostu dodaj to:
.fa-placholder { font-family: "FontAwesome"; }
To działa dobrze dla mnie.
Aktualizacja:
Aby zmienić czcionkę podczas wpisywania tekstu przez użytkownika, po prostu dodaj czcionkę po niesamowitej czcionce
.fa-placholder { font-family: "FontAwesome", "Source Sans Pro"; }
źródło
Każdy, kto zastanawia się nad Font Awesome 5 implementacją :
Nie określaj ogólnej rodziny czcionek „Font Awesome 5”, musisz konkretnie zakończyć gałąź ikon, z którymi pracujesz. Tutaj używam na przykład gałęzi „Marki”.
Więcej szczegółów Użyj ikony Font Awesome (5) w tekście zastępczym
źródło
Ignorując jQuery można to zrobić za
::placeholder
pomocą elementu wejściowego.Część CSS
NAJLEPSZA CZĘŚĆ: Możesz mieć inną rodzinę czcionek dla symbolu zastępczego i tekstu
źródło
Wiem, że to pytanie jest bardzo stare. Ale nie widziałem żadnej prostej odpowiedzi, jakiej używałem.
Wystarczy dodać
fas
klasę do wejścia i wstawić prawidłowy hex w tym przypadku
dla glifu Font-Awesome jak tutaj<input type="text" class="fas" placeholder="" />
Możesz znaleźć Unicode każdego glifu w oficjalnej sieci tutaj .
To jest prosty przykład, nie potrzebujesz css ani javascript.
źródło
Występuje niewielkie opóźnienie i szarpnięcie, gdy zmienia się czcionka w odpowiedzi udzielonej przez Jasona. Użycie zdarzenia „change” zamiast „keyup” rozwiązuje ten problem.
źródło
Dodałem razem tekst i ikonę w symbolu zastępczym.
CSS:
źródło
Jeśli możesz / chcesz użyć Bootstrap, rozwiązaniem byłyby grupy wejściowe:
Wygląda mniej więcej tak: wprowadzanie z poprzedzaniem tekstu i symbolem wyszukiwania
źródło
Problem rozwiązałem trochę inaczej i działa on z każdą ikoną FA poprzez kod HTML. Zamiast tych wszystkich trudności z symbolem zastępczym, moje rozwiązanie to:
Jest to trudniejsze niż wcześniej myślałem, ale mam nadzieję, że komuś w tym pomogłem.
Codepen: https://codepen.io/dzakh/pen/YzKqJvy
źródło
Rozwiązanie Teocciego jest tak proste, jak to tylko możliwe, dlatego nie ma potrzeby dodawania żadnego CSS, wystarczy dodać class = "fas" dla Font Awesome 5, ponieważ dodaje on odpowiednią deklarację czcionki CSS do elementu.
Oto przykład pola wyszukiwania w pasku nawigacyjnym Bootstrap, z ikoną wyszukiwania dodaną zarówno do grupy danych wejściowych, jak i do symbolu zastępczego (oczywiście w celu demonstracji nikt nie użyłby obu jednocześnie). Obraz: https://i.imgur.com/v4kQJ77.png "> Kod:
źródło
Czasami przede wszystkim odpowiadaj nie budząc się, kiedy możesz użyć poniższej sztuczki
źródło