Используйте угловую иконку fontawesome при вводе текста-заполнителя - PullRequest
Новая
       81

Используйте угловую иконку fontawesome при вводе текста-заполнителя

0 голосов
/ 09 октября 2018

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

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

Ответы [ 2 ]

0 голосов
/ 09 октября 2018

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

  <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;  
  } 
}
0 голосов
/ 09 октября 2018

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

npm install @fortawesome/fontawesome-free -s

Импорт font-awesome в ваши styles.css

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

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

...