Użyj niesamowitej ikony czcionki w symbolu zastępczym

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 contentregule. 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="&#xF002;"/>
  </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.

Jeśli używasz FontAwesome 4.7tego, powinno wystarczyć:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<input type="text" placeholder="&#xF002; Search" style="font-family:Arial, FontAwesome" />

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).

Rozwiązałem tą metodą:

W CSS użyłem tego kodu dla klasy fontAwesome :

.fontAwesome {
  font-family: 'Helvetica', FontAwesome, sans-serif;
}

W HTML dodałem klasę fontawesome i kod ikony fontawesome wewnątrz elementu zastępczego:

<input type="text" class="fontAwesome" name="emailAddress" placeholder="&#xf0e0;  insert email address ..." value="">

Możesz zobaczyć w CodePen .

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:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css">

<input type="text" placeholder="&#xF002; Search" style="font-family: Arial, 'Font Awesome 5 Free'" />

W przypadku FA5 Pro nazwa czcionki to „Font Awesome 5 Pro”

Jeśli jest obsługiwany, możesz użyć ::input-placeholderpseudoselektora 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

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 ):

    input {
      width:96%;
      margin:5px 2%;
      padding:0 8px;
      border:1px solid #444;
      border-radius: 14px;
      background: #fff;
      @include placeholder {
        font-family: 'FontAwesome', $gotham;
      }
    }

Jeśli używasz tylko kierownic, jak wspomniano wcześniej, możesz po prostu ustawić encję HTML jako symbol zastępczy:

<input id="listFilter" placeholder="&#xF002;" type="text">

Jeśli używasz Ember, powiąż symbol zastępczy z właściwością kontrolera, która ma wartość Unicode.

w szablonie:

{{text-field
  id="listFilter"
  placeholder=listFilterPlaceholder
  value=listFilter}}

na kontrolerze:

listFilter: null,
listFilterPlaceholder: "\uf002"

A wiązanie wartości działa dobrze!

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.

Robię to, dodając fa-placeholderklasę do tekstu wejściowego:

<input type="text" name="search" class="form-control" placeholder="&#xF002;" />

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"; }

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”.

<input style="font-family:'Font Awesome 5 Brands' !important" 
       type="text" placeholder="&#xf167">

Więcej szczegółów Użyj ikony Font Awesome (5) w tekście zastępczym

Ignorując jQuery można to zrobić za ::placeholderpomocą elementu wejściowego.

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control name" placeholder="&#xF002;"/>
  </div>
</form>

Część CSS

input.name::placeholder{ font-family:fontAwesome; font-size:[size needed]; color:[placeholder color needed] }

input.name{ font-family:[font family you want to specify] }

NAJLEPSZA CZĘŚĆ: Możesz mieć inną rodzinę czcionek dla symbolu zastępczego i tekstu

Wiem, że to pytanie jest bardzo stare. Ale nie widziałem żadnej prostej odpowiedzi, jakiej używałem.

Wystarczy dodać fasklasę do wejścia i wstawić prawidłowy hex w tym przypadku &#xf002dla glifu Font-Awesome jak tutaj<input type="text" class="fas" placeholder="&#xf002" />

Możesz znaleźć Unicode każdego glifu w oficjalnej sieci tutaj .

To jest prosty przykład, nie potrzebujesz css ani javascript.

input {
  padding: 5px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<form role="form">
  <div class="form-group">
    <input type="text" class="fas" placeholder="&#xf002" />
  </div>
</form>

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.

$('#iconified').on('change', function() {
    var input = $(this);
    if(input.val().length === 0) {
        input.addClass('empty');
    } else {
        input.removeClass('empty');
    }
});

Dodałem razem tekst i ikonę w symbolu zastępczym.

placeholder="Edit   "

CSS:

font-family: FontAwesome,'Merriweather Sans', sans-serif;

Jeśli możesz / chcesz użyć Bootstrap, rozwiązaniem byłyby grupy wejściowe:

<div class="input-group">
 <div class="input-group-prepend">
  <span class="input-group-text"><i class="fa fa-search"></i></span>
  </div>
 <input type="text" class="form-control" placeholder="-">
</div>

Wygląda mniej więcej tak: wprowadzanie z poprzedzaniem tekstu i symbolem wyszukiwania

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:

1. Umieszczanie ikony w zwykły sposób

HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="Some text">

CSS
.block__icon {
  position: absolute;
  margin: some-corrections;
}
.block__input {
  padding: some-corrections;
}

2. Następnie dostosuj tekst zastępczy (jest osobisty dla każdego, w moim przypadku ikona znajdowała się tuż przed tekstem)

HTML
<!-- For example add some spaces in placeholder, to make focused cursor stay before an icon -->
...placeholder="    Some text"...

3. Oto problem polegający na tym, że ikona znajduje się nad naszym wejściem i blokuje kursor do kliknięcia, więc powinniśmy dodać jeszcze jedną linię w naszym CSS

CSS
.block__icon {
  position: absolute;
  margin: some-corrections;

  /* The new line */
  pointer-events: none;
}

4. Ale ikona nie znika razem z symbolem zastępczym, więc musimy to naprawić. A także to jest ostateczna wersja mojego rozwiązania:

HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="    Some text">

CSS
.block__icon {
  position: absolute;
  z-index: 2; /* New line */
  margin: some-corrections;
}
.block__input {
  position: relative; /* New line */
  z-index: 2; /* New line */
  padding: some-corrections;
}
/* New */
.block__input:placeholder-shown {
    z-index: 1;
}

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

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:

<form class="form-inline my-2 my-lg-0">
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text"><i class="fas fa-search"></i></span>
        </div>
        <input type="text" class="form-control fas text-right" placeholder="&#xf002;" aria-label="Search string">
        <div class="input-group-append">
            <button class="btn btn-success input-group-text bg-success text-white border-0">Search</button>
        </div>
    </div>
</form>

Czasami przede wszystkim odpowiadaj nie budząc się, kiedy możesz użyć poniższej sztuczki

.form-group {
  position: relative;
}

input {
  padding-left: 1rem;
}

i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="search">
    <i class="fas fa-search"></i>
  </div>
</form>