Użyj niesamowitej ikony czcionki w symbolu zastępczym


111

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

Odpowiedzi:


61

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.


4
FontAwesome wyświetli zwykłe znaki dla wszystkich symboli innych niż Unicode. U mnie wstawianie jednostki Unicode nie działa, ale wklejanie symbolu działa: symbol zastępczy = " Hello"
DanielKhan

W FontAwesome 5 użyj rodziny czcionek: Font Awesome \ 5 Free; zamiast.
Andrew Schultz

1
@AndrewSchultz, font-family: Font Awesome\ 5 Free;nie działa. Musiałem użyć tylkofont-family: FontAwesome;
kanlukasz

Właściwie możesz zastosować różne czcionki do wejścia. Zrobiłem to na instalacji z FA5 Pro i zastosowałem font-family: 'Font Awesome 5 Pro', 'Montserrat';do pola wyszukiwania i zadziałało to urocze.
Jeff W

230

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


8
skąd masz &#xF002;wartość? Mam na myśli, jak idziesz od icon-searchdo &#xF002?
Ігар Цімошка

2
Nie musisz nawet po id="iconified"prostu dodawać, class="fa"a font awesome zajmie się css za Ciebie.
Pedro Hoehl Carvalho

8
Musiałem zmienić kolejność czcionki, aby to działało: <input type="text" placeholder="&#xf002; Search Blog" style="font-family: FontAwesome, Arial; font-style: normal">. W przeciwnym razie był wyświetlany symbol zawierający „fl”.
Guillaume Renoult

4
@ ІгарЦімошка Wszystkie kody szesnastkowe są pokazane w ściągawce fortawesome.github.io/Font-Awesome/cheatsheet
Liam George Betsworth


20

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 .


Działa to również w przypadku używania FA5 Proinput[type="text"]::placeholder { text-align: right; font-family: Roboto, 'Font Awesome\ 5 Pro', sans-serif; font-weight: 600; }
ChrisB,

10

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”



8

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!

przykład symbolu zastępczego

gif zastępczy



Fajny post dla tych, którzy używają innych technologii internetowych.
L84

1
Wielkie dzięki! drapię się trochę po głowie. dzięki za wyszczególnienie rozwiązania!
Moe Tsao


4

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


4

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


3

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


3

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>


To jest odpowiedź na Font Awesome 5. Dzięki!
laviex

1

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');
    }
});

1

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

placeholder="Edit &nbsp; &#xf040;"

CSS:

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


1

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


0

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>

0

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>

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.