ใช้ไอคอน Font Awesome ใน Placeholder

เป็นไปได้ไหมที่จะใช้ Font Awesome Icon ใน Placeholder ฉันอ่านแล้วว่าไม่อนุญาตให้ใช้ HTML ในตัวยึดตำแหน่ง มีวิธีแก้ปัญหาหรือไม่?

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

คุณไม่สามารถเพิ่มไอคอนและข้อความได้เนื่องจากคุณไม่สามารถใช้แบบอักษรอื่นกับส่วนหนึ่งของตัวยึดตำแหน่งได้อย่างไรก็ตามหากคุณพอใจกับแค่ไอคอนก็สามารถใช้งานได้ ไอคอน FontAwesome เป็นเพียงตัวอักษรที่มีแบบอักษรที่กำหนดเอง (คุณสามารถดูที่FontAwesome Cheatsheetสำหรับอักขระ Unicode ที่หลีกเลี่ยงได้ในcontentกฎในซอร์สโค้ดที่น้อยกว่าจะพบในตัวแปรแต่ความท้าทายคือการสลับฟอนต์เมื่ออินพุตเป็น ไม่ว่าง. รวมกับ 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" />

รายการของรหัสฐานสิบหกสามารถพบได้ในFont cheatsheet อย่างไรก็ตามใน 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 (ที่ฉันรู้จัก) คือการใช้ตัวช่วยในตัว แต่นั่นทำให้ตัวยึดตำแหน่งถูก Escape "& # xF002" ก็แสดงข้อความแบบนั้น

หากคุณใช้ Ember หรือไม่คุณต้องตั้งค่า CSS ของตัวยึดตำแหน่งของอินพุตให้มีตระกูล FontAwesome แบบอักษร นี่คือ 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=""ในการป้อนข้อมูลของคุณ คุณสามารถค้นหา Unicode ในหน้า 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" ทั่วไปคุณต้องลงท้ายด้วยสาขาของไอคอนที่คุณใช้งานโดยเฉพาะ ที่นี่ฉันใช้สาขา "แบรนด์" เช่น

<input style="font-family:'Font Awesome 5 Brands' !important" 
       type="text" placeholder="&#xf167">

รายละเอียดเพิ่มเติมใช้ไอคอน Font Awesome (5) ในการป้อนข้อความตัวยึดตำแหน่ง

การละเว้น jQuery ซึ่งสามารถทำได้โดยใช้::placeholderองค์ประกอบอินพุต

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

ส่วน css

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

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

ส่วนที่ดีที่สุด: คุณสามารถมีตระกูลแบบอักษรที่แตกต่างกันสำหรับตัวยึดตำแหน่งและข้อความ

ฉันรู้ว่าคำถามนี้มันเก่ามาก แต่ไม่เห็นมีคำตอบง่ายๆเหมือนที่เคยใช้

คุณเพียงแค่ต้องเพิ่มfasคลาสลงในอินพุตและใส่เลขฐานสิบหกที่ถูกต้องในกรณีนี้&#xf002สำหรับสัญลักษณ์ของ Font-Awesome ที่นี่<input type="text" class="fas" placeholder="&#xf002" />

คุณสามารถค้นหา Unicode ของแต่ละสัญลักษณ์ในเว็บเป็นทางการที่นี่

นี่เป็นตัวอย่างง่ายๆที่คุณไม่จำเป็นต้องใช้ css หรือ 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>

มีความล่าช้าเล็กน้อยและกระตุกเนื่องจากแบบอักษรเปลี่ยนไปในคำตอบที่ Jason ให้มา การใช้เหตุการณ์ "change" แทน "keyup" ช่วยแก้ปัญหานี้ได้

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

ฉันเพิ่มทั้งข้อความและไอคอนเข้าด้วยกันในตัวยึด

placeholder="Edit   "

CSS:

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

หากคุณสามารถ / ต้องการใช้ Bootstrap โซลูชันจะเป็นกลุ่มอินพุต:

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

มีลักษณะดังนี้: อินพุตที่มีข้อความนำหน้าและสัญลักษณ์ค้นหา

ฉันได้แก้ไขปัญหาต่างออกไปเล็กน้อยและใช้งานได้กับไอคอน FA ใด ๆ ผ่านรหัส html แทนที่จะเป็นปัญหาเหล่านี้กับตัวยึดตำแหน่งทางออกของฉันคือ:

1. เพื่อวางไอคอนในลักษณะปกติ

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. จากนั้นปรับข้อความของตัวยึดตำแหน่ง (เป็นเรื่องส่วนตัวสำหรับทุกคนในกรณีของฉันไอคอนอยู่ก่อนข้อความ)

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

3. นี่คือปัญหาที่ไอคอนอยู่เหนืออินพุตของเราและบล็อกเคอร์เซอร์ให้คลิกดังนั้นเราควรเพิ่มอีกหนึ่งบรรทัดใน CSS ของเรา

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

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

4. แต่ไอคอนจะไม่หายไปพร้อมกับตัวยึดดังนั้นเราจึงต้องแก้ไข และนี่คือเวอร์ชันสุดท้ายของโซลูชันของฉัน:

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

มันยากกว่าที่ฉันคิดไว้ก่อน แต่ฉันหวังว่าฉันจะช่วยใครก็ได้ในเรื่องนี้

Codepen: https://codepen.io/dzakh/pen/YzKqJvy

วิธีแก้ปัญหาของ Teocci นั้นง่ายมากดังนั้นไม่จำเป็นต้องเพิ่ม CSS ใด ๆ เพียงแค่เพิ่ม class = "fas" สำหรับ Font Awesome 5 เนื่องจากจะเพิ่มการประกาศแบบอักษร CSS ที่เหมาะสมให้กับองค์ประกอบ

นี่คือตัวอย่างสำหรับช่องค้นหาภายใน Bootstrap navbar ที่มีการเพิ่มไอคอนค้นหาลงในกลุ่มอินพุตและตัวยึดตำแหน่ง (แน่นอนว่าไม่มีใครใช้ทั้งสองอย่างพร้อมกัน) รูปภาพ: https://i.imgur.com/v4kQJ77.png "> รหัส:

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

บางครั้งเหนือสิ่งอื่นใดคำตอบไม่ตื่นเมื่อคุณสามารถใช้เคล็ดลับด้านล่าง

.form-group {
  position: relative;
}

input {
  padding-left: 1rem;
}

i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="search">
    <i class="fas fa-search"></i>
  </div>
</form>