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

자리 표시 자에서 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="&#xF002;"입력에 사용하십시오 . FontAwesome 페이지 http://fontawesome.io/icons/ 에서 유니 코드를 찾을 수 있습니다 . 그러나 style="font-family: FontAwesome;"입력 내용을 추가 해야합니다.