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

89

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>
html  css  font-awesome 
— user2275855
소스

답변:

113

대신 다른 태그를 사용 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하거나 자바 스크립트 를 사용하여 수행 할 수 있습니다 .

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

<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에 &#xf002;그것은 작동합니다.

FontAwesome의 링크 아스키 코드 ( 쪽지 ) : fortawesome.github.io/Font-Awesome/cheatsheet

아이콘의 크기는를 통해 쉽게 조정할 수 있습니다 font-size.

inputjsfidde 의 요소 를 사용하는 위의 예를 참조하십시오 .

데모

업데이트 : FontAwesome 5

FontAwesome 버전 5에서는이 솔루션에 필요한 CSS가 변경되었습니다. 글꼴 패밀리 이름이 변경되고 글꼴 두께를 지정해야합니다.

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

업데이트 된 바이올린에 대한 링크가있는 @WillFastie의 의견을 참조하십시오. 감사!

— 마틴 투르 작
소스
2
@HTMLDeveloper 문제는 FontAwesome이 일반적으로 적용되는 방식입니다 ... 사용 :before하므로 input또는 img태그 와 함께 작동하지 않습니다 ... 그러나 간단한 해결책이 있습니다. 즉, FontAwesome을 일반 글꼴로 사용 ... 내 업데이트 된 솔루션을 참조하십시오 위. 나는 다시 투표를 받기를 바랍니다 ;-)
— Martin Turjak
11
Boo on you @HTMLDeveloper ... 그는 입력 태그에 Font Awesome 스타일을 적용 할 수 없다고 자신의 답변 (모든 편집에서 확인했습니다)에 명확하게 명시했습니다. 그런 다음 몇 가지 다른 솔루션을 게시했으며 그중 하나만 버튼 사용을 포함했습니다. 그런 다음 자신의 정확한 대답을 계속 사용했습니다. 나쁜 형태.
— O_O
1
받는 링크 아스키 코드 ( 쪽지 :) fortawesome.github.io/Font-Awesome/cheatsheet
— Vadorequest
1
@Vadorequest 감사합니다! 좋은 생각 ... 나는 대답에 대한 링크를 추가 ^ _ ^
— 마틴 Turjak
2
+1 fkn 거대한 트릭 !! 고마워요 왜 & # xf002; font-family : FontAwesome을 추가한다는 것을 깨달은 덕분에 입력에 표시되지 않았습니다. 당신은 나를 구했습니다 : D
— itsme
44

다음은 간단한 CSS 및 표준 글꼴 멋진 구문으로 작동하는 솔루션이며 유니 코드 값 등이 필요하지 않습니다.

  1. 필요한 아이콘이 <input>있는 표준 태그 뒤에 태그를 만듭니다 <i>.

  2. 상위 레이어 순서 (Z- 인덱스)와 함께 상대 위치 지정을 사용하고 아이콘을 입력 필드 위와 위로 이동합니다.

  3. (선택 사항) 표준 JS를 통해 데이터를 제출하기 위해 아이콘을 활성화 할 수 있습니다.

HTML / CSS / JS에 대해서는 아래의 세 코드 스 니펫을 참조하십시오.

또는 여기 JSFiddle에서도 동일합니다. 예 : 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>
스 니펫 확장

— 에탄 필
소스
10

FontAwesome 아이콘을 drupal 입력에 가져 오는 방법을 궁금해하는 사람들을 위해 먼저 다음과 같이 decode_entities를 수행해야합니다.

$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities('&#xf014;'), // code for FontAwesome trash icon
// etc.
);
— 톰 애플 시드
소스
4

버튼 요소에 대한 입력을 변경하면 여기에 Font Awesome 클래스를 사용할 수 있습니다. 글리프의 정렬은 데모에서 좋지 않지만 아이디어를 얻습니다.

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

여기서 장점은 버튼이 아니지만 버튼처럼 보이는 요소에 대한 이벤트 핸들러를 추가하지 않고도 양식이 여전히 완벽하게 작동한다는 것입니다.

— Cimmanon
소스
1

상단 답변과 유사하게 HTML의 value = 섹션에서 유니 코드 문자를 사용하고 해당 입력 요소의 글꼴 패밀리로 FontAwesome을 호출했습니다. 상위 답변이 다루지 않는 유일한 것은 내 가치 요소에도 아이콘 뒤에 텍스트가 있었기 때문에 글꼴 패밀리를 FontAwesome으로 변경하면 일반 텍스트가 나빠 보인다는 것입니다. 해결책은 단순히 대체 글꼴을 포함하도록 CSS를 변경하는 것입니다.

<input type="text" id="datepicker" placeholder="Change Date" value=" Sat Oct 19" readonly="readonly" class="hasDatepicker">

font-family: FontAwesome, Roboto, sans-serif;

이렇게하면 FontAwesome이 아이콘을 잡지 만 아이콘이 아닌 모든 텍스트에는 원하는 글꼴이 적용됩니다.

— 제프 트라 빌라
소스
0 
.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>
— dxpkumar
소스
0

멋진 새 글꼴을위한 간단한 방법 

  <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search" name="txtSearch"  >
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
                    </div>
                </div>
— 알리
소스
-4

unicode 또는 fontawesome으로이 작업을 수행하려면 입력 태그가 : after와 같은 의사 클래스를 지원하지 않기 때문에 아래와 같은 클래스로 스팬을 추가해야합니다. 이것은 직접적인 해결책이 아닙니다.

HTML에서 :

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

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;   

}
— Web Designer 겸 홍보 인
소스
7
문제는 당신이 span 태그에 대한 대답 입력 태그를 요청
— O_O
사실, 버튼 대신 텍스트 입력에 적용하는 것에 대한 유일한 대답이므로 +1.
— BorisOkunskiy 2014-06-28
1
@incarnate 실제로이 답변은 입력 필드가 아니라 범위에 스타일을 적용하는 반면 MartinTurjak 는 위의 답변 에서 완전한 솔루션 (및 추가 대안)을 제공합니다 .
— BobbyZ
제목에«글꼴 굉장 아이콘을 입력 필드에 어떻게 추가하나요?»라고 나와 있으므로 여기에 텍스트 입력을 의미했습니다. — 버튼에 대해서는 언급하지 않습니다. MartinTurjak는 텍스트 필드가 아닌 버튼 스타일을 지정하는 좋은 방법을 설명합니다.
— BorisOkunskiy 2014 년
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.