ฉันจะเพิ่มไอคอน 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หรือด้วยจาวาสคริปต์

การละลายปุ่มจะเป็นดังนี้:

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

อัปเดต: การใช้ FontAwesome บนแท็กใด ๆ

ปัญหาของ FontAwsome คือสไตล์ชีตใช้:beforeองค์ประกอบหลอกเพื่อเพิ่มไอคอนให้กับองค์ประกอบ - และองค์ประกอบหลอกไม่ทำงาน / ไม่ได้รับอนุญาตในinputองค์ประกอบ นี่คือเหตุผลที่ใช้ FontAwesome inputวิธีปกติจะไม่ทำงานกับ

แต่มีวิธีแก้ไข - คุณสามารถใช้ FontAwesome เป็นแบบอักษรปกติได้ดังนี้:

CSS:

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

HTML:

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

ร่ายมนตร์สามารถส่งผ่านเป็นค่าของvalueแอตทริบิวต์ รหัส ASCII สำหรับแต่ละตัวอักษร / ไอคอนสามารถพบได้ในไฟล์ CSS FontAwesome คุณเพียงแค่ต้องเปลี่ยนพวกเขาเป็นจำนวน ASCII HTML เช่น\f002ไปและมันควรจะทำงาน

เชื่อมโยงไปยังรหัส FontAwesome ascii ( cheatsheet ): fortawesome.github.io/Font-Awesome/cheatsheet

สามารถปรับขนาดของไอคอนได้อย่างง่ายดายผ่านfont-sizeไฟล์.

ดูตัวอย่างด้านบนโดยใช้inputองค์ประกอบใน jsfidde:

การสาธิต

อัปเดต: 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 พร้อมลิงก์ไปยัง fiddle bellow ที่อัปเดต ขอบคุณ!

นี่คือโซลูชันที่ใช้งานได้กับ 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>

สำหรับผู้ที่สงสัยว่าจะรับไอคอน FontAwesome ไปยังการป้อนข้อมูลของ drupal ได้อย่างไรคุณต้องถอดรหัสความเป็นส่วนตัวก่อนดังนี้:

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

เปลี่ยนการป้อนข้อมูลของคุณเป็นองค์ประกอบปุ่มและคุณสามารถใช้คลาส 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;
}

ข้อดีคือแบบฟอร์มยังคงใช้งานได้อย่างสมบูรณ์โดยไม่ต้องเพิ่มตัวจัดการเหตุการณ์สำหรับองค์ประกอบที่ไม่ใช่ปุ่ม แต่ดูเหมือนอย่างเดียว

คล้ายกับคำตอบด้านบนฉันใช้อักขระ Unicode ในส่วน value = ของ HTML และเรียก 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 จะจับไอคอน แต่ข้อความที่ไม่ใช่ไอคอนทั้งหมดจะมีแบบอักษรที่ต้องการใช้

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

วิธีง่ายๆสำหรับแบบอักษรใหม่ที่ยอดเยี่ยม

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

ในการทำงานกับ 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;   

}