Próbuję wstawić ikonę użytkownika w polu wprowadzania nazwy użytkownika.
Wypróbowałem jedno z rozwiązań z podobnego pytania,
wiedząc, że background-image
właściwość nie będzie działać, ponieważ Font Awesome jest czcionką.
Oto moje podejście i nie mogę uzyskać wyświetlania ikon.
.wrapper input[type="text"] {
position: relative;
}
.wrapper input[type="text"]:before {
font-family: 'FontAwesome';
position: absolute;
top: 0px;
left: -5px;
content: "\f007";
}
Mam zadeklarowaną krój czcionki w domyślnym niesamowitym CSS, więc nie byłem pewien, czy dodanie rodziny czcionek powyżej było właściwym podejściem.
@font-face {
font-family: 'FontAwesome';
src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
}
html
css
fonts
font-awesome
Seong Lee
źródło
źródło
Odpowiedzi:
Masz rację. : before i: after pseudo treść nie jest przeznaczona do pracy z zastępowanymi elementami, takimi jak
img
iinput
. Dodanie elementu opakowującego i zadeklarowanie rodziny czcionek jest jedną z możliwości, podobnie jak użycie obrazu tła. A może tekst zastępczy HTML5 pasuje do Twoich potrzeb:Przeglądarki, które nie obsługują atrybutu symbolu zastępczego, po prostu go zignorują.
AKTUALIZACJA
Przed selektor zawartość wybiera wejście:
input[type="text"]:before
. Należy wybrać opakowanie:.wrapper:before
. Zobacz http://jsfiddle.net/allcaps/gA4rx/ . Dodałem również sugestię symbolu zastępczego, w której opakowanie jest zbędne.Rezerwowa
Font Awesome używa obszaru prywatnego użytku Unicode (PUA) do przechowywania ikon. Inne znaki nie są obecne i powracają do domyślnych ustawień przeglądarki. To powinno być takie samo, jak każde inne wejście. Jeśli zdefiniujesz czcionkę w elementach wejściowych, podaj tę samą czcionkę jako czcionkę zastępczą w sytuacjach, w których używamy ikony. Lubię to:
źródło
input { font-family: 'FontAwesome' YourFont; }
. czy to pomaga? Zawsze możesz zadać nowe pytanie.Wynik:
HTML:
CSS:
(Lub)
Wynik:
HTML:
CSS:
źródło
z-index: 1
spowoduje, że podstawowe dane wejściowe przechwycą fokus po kliknięciu ikony - coś, czego możesz chcieć na przykład podczas dodawania DatePicker.position: relative
(ujemne marginesy tego nie potrzebują) aniz-index
(gdy tylko element zostanie wyrenderowany po wejściu)Możesz użyć opakowania. Wewnątrz opakowania dodaj element awesome font
i
orazinput
element.następnie ustaw położenie opakowania na względne:
a następnie ustaw pozycję
i
elementu na wartość bezwzględną i ustaw dla niego prawidłowe miejsce:(Wiem, że to hack, ale wykonuje swoją pracę).
źródło
Ta odpowiedź będzie działać, jeśli chcesz spełnić następujące warunki (żadna z obecnych odpowiedzi nie spełnia tych warunków):
Uważam, że 3 to minimalna liczba elementów HTML spełniająca te warunki:
źródło
Nie musisz dużo kodować ... po prostu wykonaj następujące kroki:
możesz znaleźć linki do Unicode ( fontawesome ) tutaj ...
FontAwesome Unicode dla ikon
źródło
źródło
Po przeczytaniu różnych wersji tego pytania i przeszukaniu go, znalazłem całkiem czyste, wolne od js rozwiązanie. Jest podobne do rozwiązania @allcaps, ale pozwala uniknąć problemu zmiany czcionki wejściowej na inną niż główna czcionka dokumentu.
Użyj
::input-placeholder
atrybutu, aby określić styl tekstu zastępczego. Pozwala to na użycie czcionki ikony jako czcionki zastępczej i treści (lub innej czcionki) jako faktycznego tekstu wejściowego. Obecnie musisz określić selektory specyficzne dla dostawcy.Działa to dobrze, o ile nie potrzebujesz kombinacji ikony i tekstu w elemencie wejściowym. Jeśli to zrobisz, będziesz musiał pogodzić się z tekstem zastępczym jako domyślną czcionką przeglądarki (zwykły szeryfowy na moim) dla słów.
Np.
HTML
CSS
Baw się z selektorami z prefiksem przeglądarki: http://jsfiddle.net/gA4rx/78/
Pamiętaj, że musisz zdefiniować każdy selektor specyficzny dla przeglądarki jako oddzielną regułę. Jeśli je połączysz, przeglądarka zignoruje to.
źródło
font-family
ten selektor. Możemy tylko mieć nadzieję na szerszą akceptację w przyszłości.Najłatwiej znalazłem sposób, korzystając z bootstrap 4.
źródło
Osiągnąłem to w ten sposób
Wynik wygląda następująco:
Dygresja
Zwróć uwagę, że używam Ruby on Rails, więc mój wynikowy kod wygląda na nieco wysadzony. Kod widoku w slim jest w rzeczywistości bardzo zwięzły:
źródło
Dla mnie łatwym sposobem na umieszczenie ikony „w” polu tekstowym bez konieczności używania pseudoelementów z niesamowitym unikodem czcionki itp. Jest wprowadzenie tekstu i ikony w elemencie opakowania, który umieścimy względem siebie, a następnie umieść zarówno wejście wyszukiwania, jak i niesamowitą ikonę czcionki.
To samo, co robimy z obrazami tła i tekstem, zrobilibyśmy tutaj. Uważam, że jest to dobre również dla początkujących, ponieważ pozycjonowanie CSS jest czymś, czego początkujący powinien nauczyć się na początku swojej przygody z kodowaniem, więc kod jest łatwy do zrozumienia i ponownego wykorzystania.
źródło
Opierając się na sugestii allcaps. Oto metoda tła z niesamowitą czcionką z najmniejszą ilością HTML:
źródło
Utwórz ikonę, którą można kliknąć, aby zaznaczyć element do wprowadzania tekstu.
CSS
HTML
Po prostu dodaj dowolną ikonę do
<i>
tagu, z biblioteki Font Awesome i ciesz się wynikami.źródło
źródło
czysto CSS
źródło
Moim rozwiązaniem było posiadanie względnego pojemnika wokół
input
ikony do trzymania ikony. Ten zewnętrzny pojemnik ma::after
ikonę z żądaną ikoną, umieszczonąabsolute
w pojemniku.HTML:
Kod SASS:
źródło
Moje rozwiązanie, aby dodać niesamowitą ikonę czcionki wewnątrz elementu wejściowego. Oto prosty kod umożliwiający dodanie ikony wewnątrz elementu wejściowego. Po prostu skopiuj poniższy kod i umieść tam, gdzie chcesz dodać. lub jeśli chcesz zmienić ikonę, po prostu umieść kod ikony w
<i>
tagu.źródło
Czasami ikona nie pojawia się z powodu wersji Font Awesome. W przypadku wersji 5 css powinien mieć postać
źródło
Łatwy sposób, ale potrzebujesz bootstrap
źródło
źródło
Wypróbowałem poniższe rzeczy i naprawdę dobrze działa HTML
źródło
Aby to pracować z unicode lub fontawesome, należy dodać
span
zeclass
jak poniżej:W HTML:
W CSS:
źródło
źródło