자리 표시 자에 글꼴 굉장 아이콘 사용

자리 표시 자에서 Font Awesome Icon을 사용할 수 있습니까? 자리 표시 자에서 HTML이 허용되지 않는 곳을 읽었습니다. 해결 방법이 있습니까?

placeholder="<i class='icon-search'></i>"

자리 표시 자의 일부에 다른 글꼴을 적용 할 수 없기 때문에 아이콘과 텍스트를 추가 할 수 없지만 아이콘만으로 만족하면 작동 할 수 있습니다. FontAwesome 아이콘은 사용자 정의 글꼴이있는 문자 일뿐입니다 ( 규칙 에서 이스케이프 된 유니 코드 문자에 대한 FontAwesome Cheatsheet 를 볼 수 있습니다 content. 적은 소스 코드에서는 variables.less 에서 찾을 수 있습니다. 문제는 입력이 다음과 같을 때 글꼴을 바꾸는 것입니다. 버리지. 같은 jQuery를 함께 결합 이 .

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

이 CSS로 :

input.empty {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

그리고이 (간단한) jQuery

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

그러나 글꼴 간의 전환은 부드럽 지 않습니다.

FontAwesome 4.7이것을 사용하는 경우 충분합니다.

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

16 진 코드 목록은 Font Awesome 치트 시트 에서 찾을 수 있습니다 . 그러나 최신 FontAwesome 5.0에서는이 방법이 작동하지 않습니다 (업데이트 된와 결합 된 CSS 접근 방식을 사용하더라도 font-family).

이 방법으로 해결했습니다.

CSS에서 fontAwesome 클래스 에이 코드를 사용했습니다 .

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

HTML 에서 자리 표시 자 안에 fontawesome 클래스 와 fontawesome 아이콘 코드를 추가했습니다 .

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

CodePen 에서 볼 수 있습니다 .

@Elli의 답변은 FontAwesome 5에서 작동하지만 올바른 글꼴 이름을 사용하고 원하는 버전에 대한 특정 CSS를 사용해야합니다. 예를 들어 FA5 Free를 사용할 때 all.css를 포함하면 제대로 작동하지 않지만 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'" />

FA5 Pro의 경우 글꼴 이름은 'Font Awesome 5 Pro'입니다.

지원되는 경우 ::input-placeholder와 결합 된 의사 선택기를 사용할 수 있습니다 ::before.

다음에서 예를 참조하십시오.

http://codepen.io/JonFabritius/pen/nHeJg

나는이 작업을하고 있었고이 기사를 보았습니다.

http://davidwalsh.name/html5-placeholder-css

Ember (버전 1.7.1)를 사용하고 있으며 입력 값을 바인딩하고 FontAwesome 아이콘 인 자리 표시자가 필요했습니다. Ember의 값을 바인딩하는 유일한 방법은 (내가 알고있는) 내장 도우미를 사용하는 것입니다. 하지만 이로 인해 자리 표시자가 이스케이프되고 "& # xF002"는 텍스트처럼 표시됩니다.

Ember를 사용하거나 사용하지 않는 경우 FontAwesome의 글꼴 모음을 갖도록 입력 자리 표시 자의 CSS를 설정해야합니다. 이것은 SCSS입니다 ( 자리 표시 자 스타일에 Bourbon 사용 ).

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

이전에 언급했듯이 핸들 바 만 사용하는 경우 html 엔티티를 자리 표시 자로 설정할 수 있습니다.

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

Ember를 사용하는 경우 자리 표시자를 유니 코드 값이있는 컨트롤러 속성에 바인딩합니다.

템플릿에서 :

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

컨트롤러에서 :

listFilter: null,
listFilterPlaceholder: "\uf002"

그리고 가치 바인딩은 잘 작동합니다!

placeholder=""입력에 사용하십시오 . FontAwesome 페이지 http://fontawesome.io/icons/ 에서 유니 코드를 찾을 수 있습니다 . 그러나 style="font-family: FontAwesome;"입력 내용을 추가 해야합니다.

fa-placeholder입력 텍스트에 클래스를 추가하여 이렇게 합니다.

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

그래서 CSS에서 다음을 추가하십시오.

.fa-placholder { font-family: "FontAwesome"; }

그것은 나를 위해 잘 작동합니다.

최신 정보:

사용자가 텍스트 입력에 입력하는 동안 글꼴을 변경하려면 글꼴 다음에 글꼴을 추가하면됩니다.

.fa-placholder { font-family: "FontAwesome", "Source Sans Pro"; }

Font Awesome 5 구현 에 대해 궁금한 사람 :

일반적인 "Font Awesome 5"글꼴 모음을 지정하지 마십시오. 작업중인 아이콘의 분기로 구체적으로 끝나야합니다. 예를 들어 여기에서는 "Brands"브랜치를 사용합니다.

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

더 자세히 입력 자리 표시 자 텍스트에 Font Awesome (5) 아이콘 사용

jQuery를 무시하면 ::placeholder입력 요소를 사용하여 수행 할 수 있습니다 .

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

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] }

가장 좋은 부분 : 자리 표시 자와 텍스트에 대해 서로 다른 글꼴 모음을 사용할 수 있습니다.

나는이 질문이 아주 오래되었다는 것을 압니다. 하지만 예전처럼 간단한 답을 보지 못했습니다.

fas입력에 클래스 를 추가 하고이 경우 Font-Awesome의 글리프에 유효한 16 진수 를 입력 &#xf002하면됩니다.<input type="text" class="fas" placeholder="&#xf002" />

여기 공식 웹 에서 각 글리프의 유니 코드를 찾을 수 있습니다 .

이것은 CSS 나 자바 스크립트가 필요없는 간단한 예제입니다.

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>

Jason이 제공 한 답변에서 글꼴이 변경됨에 따라 약간의 지연과 버벅 거림이 있습니다. "keyup"대신 "change"이벤트를 사용하면이 문제가 해결됩니다.

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

자리 표시 자에 텍스트와 아이콘을 모두 추가했습니다.

placeholder="Edit   "

CSS :

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

부트 스트랩을 사용할 수 있거나 사용하려면 솔루션은 입력 그룹입니다.

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

다음과 같이 보입니다 : 텍스트 앞에 추가 및 검색 기호가있는 입력

나는 문제를 조금 다르게 해결했으며 html 코드를 통해 모든 FA 아이콘과 함께 작동합니다. 자리 표시 자에 대한 이러한 모든 어려움 대신 내 솔루션은 다음과 같습니다.

1. 일반적인 방법으로 아이콘을 배치하려면

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. 그런 다음 자리 표시 자의 텍스트를 조정합니다 (모든 사람에게 개인적입니다. 제 경우에는 아이콘이 텍스트 바로 앞에있었습니다)

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

3. 여기에 아이콘이 입력 위에 있고 클릭 할 커서를 차단하는 문제가 있으므로 CSS에 한 줄을 더 추가해야합니다.

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

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

4. 하지만 아이콘은 자리 표시 자와 함께 사라지지 않으므로 수정해야합니다. 그리고 이것은 내 솔루션 의 최종 버전 입니다.

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

이전에 생각했던 것보다 힘들지만, 누구에게 도움이 되었으면합니다.

Codepen : https://codepen.io/dzakh/pen/YzKqJvy

Teocci 솔루션 은 가능한 한 간단하므로 CSS를 추가 할 필요가 없습니다. Font Awesome 5에 대해 class = "fas"만 추가하면 요소에 적절한 CSS 글꼴 선언이 추가됩니다.

다음은 입력 그룹과 자리 표시 자 모두에 검색 아이콘이 추가 된 Bootstrap navbar 내의 검색 상자에 대한 예입니다 (물론 시연을 위해 아무도 동시에 둘 다 사용하지 않음). 이미지 : https://i.imgur.com/v4kQJ77.png "> 코드 :

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

때로는 아래 트릭을 사용할 수있을 때 워킹하지 않는 대답

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