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

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

---

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

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

---

자리 표시 자의 일부에 다른 글꼴을 적용 할 수 없기 때문에 아이콘과 텍스트를 추가 할 수 없지만 아이콘만으로 만족하면 작동 할 수 있습니다. FontAwesome 아이콘은 사용자 지정 글꼴이있는 문자 일뿐 입니다 ( content규칙 에서 이스케이프 된 유니 코드 문자에 대한 FontAwesome.css 를 볼 수 있습니다 . 적은 소스 코드에서는 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 에서 볼 수 있습니다 .

---

지원되는 경우 ::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">

More detail Use Font Awesome (5) icon in input placeholder text

---

Ignoring the jQuery this can be done using ::placeholder of an input element.

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

The css part

input.name::placeholder{ font-family:fontAwesome; font-size:[size needed]; color:[placeholder color needed] }

input.name{ font-family:[font family you want to specify] }

THE BEST PART: You can have different font family for placeholder and text

---

I know this question it is very old. But I didn't see any simple answer like I used to use.

You just need to add the fas class to the input and put a valid hex in this case &#xf002 for Font-Awesome's glyph as here <input type="text" class="fas" placeholder="&#xf002" />

You can find the unicode of each glyph in the official web here.

This is a simple example you don't need css or javascript.

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>

---

There is some slight delay and jank as the font changes in the answer provided by Jason. Using the "change" event instead of "keyup" resolves this issue.

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

---

I added both text and icon together in a placeholder.

placeholder="Edit   "

CSS :

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

---

If you can / want to use Bootstrap the solution would be input-groups:

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

Looks about like this:input with text-prepend and search symbol

---

@Elli's answer can work in FontAwesome 5, but it requires using the correct font name and using the specific CSS for the version you want. For example when using FA5 Free, I could not get it to work if I included the all.css, but it worked fine if I included the 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'" />

For FA5 Pro the font name is 'Font Awesome 5 Pro'

---

Teocci solution is as simple as it can be, thus, no need to add any CSS, just add class="fas" for Font Awesome 5, since it adds proper CSS font declaration to the element.

Here's an example for search box within Bootstrap navbar, with search icon added to the both input-group and placeholder (for the sake of demontration, of course, no one would use both at the same time). Image: https://i.imgur.com/v4kQJ77.png "> Code:

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

---

I've solved the problem a bit differently and it works with any FA icon through html code. Instead of all these difficulties with placeholder my solution is:

1. To place an icon in the usual manner

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. Then adjust placeholder's text (it's personal for everyone, in my case an icon was just before the text)

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

3. Here is the problem that an icon is above the our input and blocks cursor to click so we should add one more line in our CSS

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

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

4. But an icon doesn't disappear together with placeholder so we need to fix it. And also this is the final version of my solution:

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

It's harder than I thought before, but I hope I've helped anyone with this.

참고URL : https://stackoverflow.com/questions/19350291/use-font-awesome-icon-in-placeholder