Значок шрифта в заполнителе не отображается, если вес шрифта не установлен на 600 - PullRequest
Новая
       84

Значок шрифта в заполнителе не отображается, если вес шрифта не установлен на 600

0 голосов
/ 19 мая 2018

Я обновил Font Awesome 4.4 до 5 и перешел от использования загруженных файлов к CDN.

Шрифты работают нормально, но при использовании значка в моем заполнителе ввода поля поиска он не отображается так, как яхочу: 

input {
  font-family: Arial, 'Font Awesome 5 Free';
  font-weight: 500;
  color: #777;
  font-size: 18px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

This won't show<br>
<input placeholder=" Location"><br>

This one is showing<br>
<input placeholder=" Location" style="font-weight:600"><br>

Проблема, с которой я столкнулся, заключается в том, что она отображается только в том случае, если вес шрифта в поле поиска составляет 600 или более!Если я установлю вес шрифта на 500, значок шрифта исчезнет!

Кажется, проблема связана с тем фактом, что обычный значок относится к версии PRO, и я могу использовать только сплошную (как описано здесь: Font Awesome показывает квадрат вместо значка при прямом использовании в CSS )

Есть ли способ использовать значок в качестве заполнителя (как я хочу, чтобы он исчезал при наборе текста) НО безделая текст жирным шрифтом.Значок может быть выделен жирным шрифтом, но не текст.

Вот веб-сайт, где вы также можете увидеть результат:

Ответы [ 2 ]

0 голосов
/ 20 мая 2018

Я думаю, что смешивание значка шрифта и стандартного шрифта, который вы используете для ввода, может быть не лучшим способом.Для вашего случая использования я бы рекомендовал отделить значок от остальной части ввода следующим образом: 

<div class="input-wrap">
  <input type="text" placeholder="Location" />
  <i class="fas fa-map-marker-alt"></i>
</div>

Я сделал пример здесь , в котором также есть некоторый пример CSS.Чтобы соответствовать вашей текущей реализации, значок также будет скрыт при фокусе ввода, но это не всегда должно быть так.

Существует также встроенный способ сделать это в Bootstrap, который я вижу, этоиспользуется на вашем примере сайта:

V4: https://getbootstrap.com/docs/4.1/components/input-group/

V3: https://getbootstrap.com/docs/3.3/components/#input-groups

0 голосов
/ 20 мая 2018

Идея состоит в том, чтобы создать заполнитель как элемент за пределами ввода, чтобы легко изолировать значок, затем вы можете имитировать эффект заполнителя, играя с состоянием focus и некоторыми z-index. 

input,
label span {
  font-family: Arial;
  font-weight: 500;
  color: #777;
  font-size: 18px;
}

label {
  position: relative;
}

label>span {
  position: absolute;
  top: 0;
  left: 5px;
  cursor: auto;
}

input {
  position: relative;
}

input:focus {
  z-index: 1;
}


/* Or 
input:focus + span {
  display:none;
}

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

<label>
<input  style="font-weight:600">
<span><i class="fas fa-search"></i> Location</span>
</label>
...