प्लेसहोल्डर में फ़ॉन्ट विस्मयकारी चिह्न का उपयोग करें

Question

क्या एक प्लेसहोल्डर में फ़ॉन्ट विस्मयकारी आइकन का उपयोग करना संभव है? मैंने पढ़ा है कि एक प्लेसहोल्डर में HTML की अनुमति नहीं है। क्या आसपास कोई काम है?

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

Answer 1

आप एक आइकन और पाठ नहीं जोड़ सकते क्योंकि आप एक प्लेसहोल्डर के हिस्से में एक अलग फ़ॉन्ट लागू नहीं कर सकते हैं, हालांकि, अगर आप सिर्फ एक आइकन से संतुष्ट हैं तो यह काम कर सकता है। FontAwesome आइकन्स एक कस्टम फॉन्ट वाले वर्ण हैं (आप नियम में बच गए यूनिकोड वर्ण के लिए FontAwesome Cheatsheet को देख सकते हैं content। कम स्रोत कोड में यह चर में पाया जाता है । जब इनपुट होता है तो फोंट स्वैप करने की चुनौती होगी। खाली नहीं है। इसे इस तरह jQuery के साथ संयोजित करें ।

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

इस सीएसएस के साथ:

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

हालाँकि, फोंट के बीच संक्रमण सुचारू नहीं होगा।

Comments

FontAwesome सभी गैर यूनिकोड प्रतीकों के लिए नियमित वर्ण दिखाएगा। मेरे लिए यूनिकोड इकाई डालने से काम नहीं चलता है, लेकिन प्रतीक में चिपकाना काम करता है: प्लेसहोल्डर = "

— K

FontAwesome 5 उपयोग के साथ फ़ॉन्ट-परिवार: फ़ॉन्ट विस्मयकारी \ 5 नि: शुल्क; बजाय।

— एंड्रयू शुल्ज़

@AndrewSchultz, font-family: Font Awesome\ 5 Free;काम नहीं करता है। मुझे बस का उपयोग करना थाfont-family: FontAwesome;

— kanlukasz

वास्तव में आप इनपुट के लिए विभिन्न फोंट लागू कर सकते हैं। मैंने इस पर FA5 प्रो के साथ एक इंस्टॉलेशन पर यह किया और font-family: 'Font Awesome 5 Pro', 'Montserrat';खोज क्षेत्र पर लागू किया और इसने एक आकर्षण का काम किया।

— जेफ डब्ल्यू

Answer 2

यदि आप इसका उपयोग कर रहे हैं तो 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" />

हेक्स कोड की एक सूची फ़ॉन्ट विस्मयकारी धोखा दे में पाया जा सकता है । हालाँकि, नवीनतम FontAwesome 5.0 में यह विधि काम नहीं करती है (भले ही आप सीएसएस अपडेट के साथ संयुक्त दृष्टिकोण का उपयोग करते हैं font-family)।

Comments

आपको मूल्य कहां से मिला ? मेरा मतलब है कि आप किस तरह से icon-searchजाते हैं &#xF002?

— Augгар Цімошка

आपको id="iconified"सिर्फ ऐड की जरूरत नहीं है class="fa"और फॉन्ट भयानक आपके लिए सीएसएस का ख्याल रखेगा।

— पेड्रो होहल कारवाल्हो

मुझे इसे काम करने के लिए फ़ॉन्ट क्रम बदलना पड़ा <input type="text" placeholder="&#xf002; Search Blog" style="font-family: FontAwesome, Arial; font-style: normal">:। अन्यथा "fl" युक्त एक प्रतीक दिखाया गया था।

— गिलाउम रेनॉल्ट

@ ІгарЦімошка हेक्स कोड सभी cheatsheet पर दिखाए जाते हैं fortawesome.github.io/Font-Awesome/cheatsheet

— लियाम जॉर्ज Betsworth

मुझे यह फॉन्ट भयानक 5 में काम कर

— रिचर्ड

Answer 3

मैंने इस विधि से हल किया:

CSS में मैंने fontAwesome class के लिए इस कोड का उपयोग किया है :

.fontAwesome {
  font-family: 'Helvetica', FontAwesome, sans-serif;
}

HTML में मैंने फ़ॉन्टधारक वर्ग और प्लेसहोल्डर आइकन कोड प्लेसहोल्डर के अंदर जोड़ा है :

<input type="text" class="fontAwesome" name="emailAddress" placeholder="&#xf0e0;  insert email address ..." value="">

आप CodePen में देख सकते हैं ।

Comments

यह भी FA5 प्रो का उपयोग कर काम करता हैinput[type="text"]::placeholder { text-align: right; font-family: Roboto, 'Font Awesome\ 5 Pro', sans-serif; font-weight: 600; }

— ChrisB

Answer 4

@ ऐली का जवाब FontAwesome 5 में काम कर सकता है, लेकिन इसके लिए सही फ़ॉन्ट नाम का उपयोग करना और आपके द्वारा इच्छित संस्करण के लिए विशिष्ट CSS का उपयोग करना आवश्यक है। उदाहरण के लिए, एफए 5 फ्री का उपयोग करते समय, मुझे यह काम करने के लिए नहीं मिला अगर मैंने ऑल.एक्स को शामिल किया, लेकिन अगर मैंने ठोस को शामिल किया तो यह ठीक काम करता है:

<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 प्रो के लिए फ़ॉन्ट का नाम 'फ़ॉन्ट विस्मयकारी 5 प्रो' है

Answer 5

जहां समर्थित है, आप ::input-placeholderसंयुक्त के साथ स्यूडोसलेक्टर का उपयोग कर सकते हैं ::before।

एक उदाहरण यहां देखें:

http://codepen.io/JonFabritius/pen/nHeJg

मैं बस इस पर काम कर रहा था और इस लेख के पार आया, जिससे मैंने इस सामान को संशोधित किया:

http://davidwalsh.name/html5-placeholder-css

Comments

फ़ायरफ़ॉक्स 27 में यह काफी काम नहीं करता है, क्या आप इसे फिर से देख सकते हैं, मैं इसका पता नहीं लगा सकता।

— Noitidart

Answer 6

मैं एम्बर (संस्करण 1.7.1) का उपयोग कर रहा हूं और मुझे इनपुट के मूल्य को बांधने की जरूरत है और एक प्लेसहोल्डर है जो एक FontAwesome आइकन था। एम्बर (जो मुझे पता है) में मूल्य को बांधने का एकमात्र तरीका अंतर्निहित हेल्पर का उपयोग करना है। लेकिन इससे प्लेसहोल्डर बच जाता है, "& # xF002" बस उसी तरह दिखाई देता है, पाठ।

यदि आप एम्बर का उपयोग कर रहे हैं या नहीं, तो आपको 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">

यदि आप एम्बर का उपयोग कर रहे हैं तो प्लेसहोल्डर को एक नियंत्रक संपत्ति से बाँध दें जिसमें यूनिकोड मान है।

टेम्पलेट में:

{{text-field
  id="listFilter"
  placeholder=listFilterPlaceholder
  value=listFilter}}

नियंत्रक पर:

listFilter: null,
listFilterPlaceholder: "\uf002"

और मूल्य बंधन ठीक काम करता है!

Comments

यह Ember 1.7.1

— RustyToms

उन लोगों के लिए अच्छी पोस्ट जो अन्य वेब प्रौद्योगिकियों का उपयोग कर रहे हैं।

— L84

बहुत धन्यवाद! मेरे सिर को काफी खरोंचना। समाधान का विवरण देने के लिए धन्यवाद!

— मो त्सो

Answer 7

placeholder=""अपने इनपुट में उपयोग करें । आप FontAwesome पेज http://fontawesome.io/icons/ में यूनिकोड पा सकते हैं । लेकिन आपको style="font-family: FontAwesome;"अपने इनपुट में सुनिश्चित करना होगा ।

Answer 8

मैं fa-placeholderइनपुट पाठ में कक्षा जोड़कर ऐसा करता हूं :

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

इसलिए, सीएसएस में बस इसे जोड़ें:

.fa-placholder { font-family: "FontAwesome"; }

ये मेरे लिए अच्छी तरह से काम करता है।

अपडेट करें:

अपने टेक्स्ट इनपुट में उपयोगकर्ता प्रकार को फ़ॉन्ट बदलने के लिए, फ़ॉन्ट फ़ॉन्ट के बाद अपना फ़ॉन्ट जोड़ें

.fa-placholder { font-family: "FontAwesome", "Source Sans Pro"; }

Answer 9

कोई भी एक फ़ॉन्ट के बारे में सोच रहा है भयानक 5 कार्यान्वयन:

एक सामान्य "फ़ॉन्ट विस्मयकारी 5" फ़ॉन्ट परिवार निर्दिष्ट न करें, आपको विशेष रूप से उन आइकन की शाखा के साथ समाप्त करने की आवश्यकता है जिनके साथ आप काम कर रहे हैं। यहां मैं उदाहरण के लिए शाखा "ब्रांड" का उपयोग कर रहा हूं।

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

अधिक विस्तार का उपयोग इनपुट प्लेसहोल्डर टेक्स्ट में फ़ॉन्ट विस्मयकारी (5) आइकन

Answer 10

JQuery की उपेक्षा यह ::placeholderएक इनपुट तत्व का उपयोग करके किया जा सकता है ।

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

सीएसएस भाग

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

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

सबसे अच्छा हिस्सा: आप प्लेसहोल्डर और पाठ के लिए अलग-अलग फ़ॉन्ट परिवार रख सकते हैं

Answer 11

मुझे पता है कि यह सवाल बहुत पुराना है। लेकिन मुझे कोई सरल उत्तर नहीं मिला जैसे मैं उपयोग करता था।

आपको बस fasक्लास को इनपुट में जोड़ने की जरूरत है और इस मामले में फ़ॉन्ट-विस्मयकारी ग्लिफ़ के लिए एक मान्य हेक्स&#xf002 को यहाँ के रूप में रखा जाए<input type="text" class="fas" placeholder="&#xf002" />

आप यहां आधिकारिक वेब में प्रत्येक ग्लिफ़ के यूनिकोड को देख सकते हैं ।

यह एक सरल उदाहरण है जिसे आपको सीएसएस या जावास्क्रिप्ट की आवश्यकता नहीं है।

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>

Comments

यह फ़ॉन्ट विस्मयकारी 5 के लिए जवाब है। धन्यवाद!

— लैविक्स

Answer 12

जेसन द्वारा प्रदान किए गए उत्तर में फ़ॉन्ट परिवर्तन के रूप में थोड़ी सी देरी और जंक है। "कीप" के बजाय "परिवर्तन" घटना का उपयोग करके इस मुद्दे को हल करता है।

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

Answer 13

मैंने एक प्लेसहोल्डर में टेक्स्ट और आइकन दोनों को एक साथ जोड़ा है।

placeholder="Edit   "

सीएसएस:

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

Answer 14

यदि आप बूटस्ट्रैप का उपयोग करना चाहते हैं / कर सकते हैं तो समाधान इनपुट-समूह होगा:

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

इस तरह दिखता है: टेक्स्ट-प्रीपेंड और सर्च सिंबल के साथ इनपुट

Answer 15

मैंने समस्या को थोड़ा अलग तरीके से हल किया है और यह 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
.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;
}

यह पहले की तुलना में कठिन है, लेकिन मुझे आशा है कि मैंने इसके साथ किसी की मदद की है।

कोडपेन: https://codepen.io/dzakh/pen/YzKqJvy

Answer 16

टेकोसी समाधान उतना ही सरल है जितना कि यह हो सकता है, इस प्रकार, किसी भी सीएसएस को जोड़ने की कोई आवश्यकता नहीं है, बस फ़ॉन्ट 5 के लिए वर्ग = "फास" जोड़ें, क्योंकि यह तत्व के लिए उचित सीएसएस फ़ॉन्ट घोषणा जोड़ता है।

यहां बूटस्ट्रैप नावबार के भीतर खोज बॉक्स के लिए एक उदाहरण है, इनपुट-समूह और प्लेसहोल्डर दोनों के लिए खोज आइकन को जोड़ा गया है (लोकतंत्र के लिए, निश्चित रूप से, कोई भी एक ही समय में दोनों का उपयोग नहीं करेगा)। चित्र: 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>

Answer 17

कभी-कभी सभी उत्तर से ऊपर नहीं उठाते हैं, जब आप नीचे दिए गए ट्रिक का उपयोग कर सकते हैं

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