입력 필드에 Font Awesome 아이콘을 어떻게 추가합니까?

입력 필드에 Font Awesome 아이콘을 어떻게 추가합니까?

---

Font Awesome에 포함 된 검색 아이콘을 어떻게 입력하나요? 내 사이트 (PHPmotion 기반)에 검색에 사용하려는 검색 기능이 있습니다.

코드는 다음과 같습니다.

<div id="search-bar">

      <form method="get" action="search.php" autocomplete="off" name="form_search">
        <input type="hidden" name="type" value="videos" />
            <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
            'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
            font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; float:left; border: 1px solid black; background-color:
            #ffffff" />
            <input type="image" src="http://viddir.com/themes/default/images/search.jpg" height="30" width="30" border="0" style="float:right;"/>
        <div id="searchBoxSuggestions"></div>
        </form>
        </div>

---

대신 다른 태그를 사용 input하고 일반적인 방법으로 FontAwesome을 적용 할 수 있습니다 .

input유형 대신 image다음을 사용할 수 있습니다.

<i class="icon-search icon-2x"></i>

빠른 CSS :

.icon-search {
    color:white;
    background-color:black;
}

다음은 빠른 바이올린입니다. DEMO

스타일을 좀 더 좋게 만들고 이벤트 기능을 i 객체에 추가 할 수 있습니다.이 작업은 <button type="submit">대신 객체를 사용 i하거나 javascript 를 사용하여 수행 할 수 있습니다 .

버튼 해결 방법은 다음과 같습니다.

<button type="submit" class="icon-search icon-large"></button>

그리고 CSS :

.icon-search {
    height:32px;
    width:32px;
    border: none;
    cursor: pointer;
    color:white;
    background-color:black;
    position:relative;
}

여기에 i 대신 버튼으로 업데이트 된 바이올린이 있습니다. 데모

---

업데이트 : 모든 태그에 FontAwesome 사용

FontAwsome의 문제점은 스타일 시트가 :before가상 요소를 사용 하여 요소에 아이콘을 추가하고 가상 요소가 작동하지 않거나 input요소에서 허용되지 않는다는 것 입니다. 이것이 FontAwesome을 정상적인 방법으로 사용하면 input.

그러나 해결책 이 있습니다-FontAwesome을 다음과 같이 일반 글꼴로 사용할 수 있습니다.

CSS :

input[type="submit"] {
    font-family: FontAwesome;
}

HTML :

<input type="submit" class="search" value="&#xf002;" />

글리프는 value속성 값으로 전달 될 수 있습니다 . 개별 문자의 아스키 코드 / 아이콘은 FontAwesome의 CSS 파일에서 찾을 수 있습니다, 당신은 단지와 같은 HTML 아스키 번호로 변경해야합니다 \f002에 그것은 작동합니다.

Link to the FontAwesome ascii code (cheatsheet): fortawesome.github.io/Font-Awesome/cheatsheet

The size of the icons can be easily adjusted via font-size.

See the above example using an input element in a jsfidde:

DEMO

---

Update: FontAwesome 5

With FontAwesome version 5 the CSS required for this solution has changed - the font family name has changed and the font weight must be specified:

input[type="submit"] {
    font-family: "Font Awesome 5 Free"; // for the open access version
    font-size: 1.3333333333333333em;
    font-weight: 900;
}

See @WillFastie 's comment with link to updated fiddle bellow. Thanks!

---

Here is a solution that works with simple CSS and standard font awesome syntax, no need for unicode values, etc.

1. Create an <input> tag followed by a standard <i> tag with the icon you need.

2. Use relative positioning together with a higher layer order (z-index) and move the icon over and on top of the input field.

3. (Optional) You can make the icon active, to perhaps submit the data, via standard JS.

See the three code snippets below for the HTML / CSS / JS.

Or the same in JSFiddle here: Example: http://jsfiddle.net/ethanpil/ws1g27y3/

$('#filtersubmit').click(function() {
  alert('Searching for ' + $('#filter').val());
});

#filtersubmit {
  position: relative;
  z-index: 1;
  left: -25px;
  top: 1px;
  color: #7B7B7B;
  cursor: pointer;
  width: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="filter" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>

---

For those, who are wondering how to get FontAwesome icons to drupal input, you have to decode_entities first like so:

$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities(''), // code for FontAwesome trash icon
// etc.
);

---

Change your input to a button element and you can use the Font Awesome classes on it. The alignment of the glyph isn't great in the demo, but you get the idea:

http://tinker.io/802b6/1

<div id="search-bar">
  <form method="get" action="search.php" autocomplete="off" name="form_search">
    <input type="hidden" name="type" value="videos" />
        <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
        'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
        font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; border: 1px solid black; background-color:
        #ffffff" /><!--
        --><button class="icon-search">Search</button>
    <div id="searchBoxSuggestions"></div>
    </form>
</div>

#search-bar .icon-search {
    width: 30px;
    height: 30px;
    background: black;
    color: white;
    border: none;
    overflow: hidden;
    vertical-align: middle;
    padding: 0;
}

#search-bar .icon-search:before {
    display: inline-block;
    width: 30px;
    height: 30px;
}

The advantage here is that the form is still fully functional without having to add event handlers for elements that aren't buttons but look like one.

---

.fa-file-o {
    position: absolute;
    left: 50px;
    top: 15px;
    color: #ffffff
}

<div>
 <span class="fa fa-file-o"></span>
 <input type="button" name="" value="IMPORT FILE"/>
</div>

---

to work this with unicode or fontawesome, you should add a span with class like below, because input tag not support pseudo classes like :after. this is not a direct solution

in html:

   <span class="button1 search"></span>
<input name="username">

in css:

.button1 {
    background-color: #B9D5AD;
    border-radius: 0.2em 0 0 0.2em;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5); 
    pointer-events: none;
    margin:1px 12px;    
    border-radius: 0.2em;    
    color: #333333;
    cursor: pointer;
    position: absolute;
    padding: 3px;
    text-decoration: none;   

}

참고URL : https://stackoverflow.com/questions/15988373/how-do-i-add-a-font-awesome-icon-to-input-field