Использовать значок Angular fontawesome в тексте-заполнителе ввода

Я использую официальный Font Awesome Angular компоненты в приложении Angular 6.
Но я не могу найти способ добавить значок поиска в качестве заполнителя к элементу ввода, кроме добавления шрифтов fontawesome в мое приложение, что нежелательно.

  <div class="search-box">
    <input type="search" [(ngModel)]="searchText" placeholder="&#xf002; Search" />
  </div>

angular placeholder font-awesome font-awesome-5 angular-fontawesome
person Taras Yaremkiv    schedule 09.10.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Поэтому я придумал такой обходной путь: вместо

  <div class="search-box">
    <input type="search" [(ngModel)]="searchText" placeholder="&#xf002; Search" />
  </div>

Я добавляю заполнитель в соседний блок

  <div class="search-box">
    <input class="search-box-input" type="search" [(ngModel)]="searchText"/>
    <div class="search-box-placeholder-wrapper">
      <fa-icon [icon]="faSearch" class="search-box-placeholder"></fa-icon>
      <span>&nbsp;Search</span>
    </div>
  </div>

и добавлены дополнительные стили css

.search-box {   
   position: relative;

  &-placeholder-wrapper {
    pointer-events: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 8px;  
   }

  &-input:focus + .search-box-placeholder-wrapper {
    display: none;  
  } 
}
person Taras Yaremkiv    schedule 09.10.2018

arrow_upward
0
arrow_downward

Установите официальный font-awesome

npm install @fortawesome/fontawesome-free -s

Импортируйте font-awesome в свой файл styles.css

@import '@fortawesome/fontawesome-free/css/all.min.css';

Теперь вы можете использовать отличный шрифт и искать иконки с официального сайта.

person Anjana Thrishakya    schedule 09.10.2018
comment
Спасибо @Anjana Thrishakya, но я искал способ использовать текущий пакет с иконками svg - person Taras Yaremkiv; 09.10.2018