पाठ इनपुट तत्व के अंदर फ़ॉन्ट विस्मयकारी आइकन

Question

मैं उपयोगकर्ता नाम इनपुट फ़ील्ड के अंदर एक उपयोगकर्ता आइकन सम्मिलित करने का प्रयास कर रहा हूं।

मैंने इसी तरह के प्रश्न से यह जानने की कोशिश की है कि background-imageप्रॉपर्टी काम नहीं करेगी क्योंकि Font Awesome एक फॉन्ट है।

निम्नलिखित मेरा दृष्टिकोण है और मुझे आइकन डिस्प्ले नहीं मिल सकता है।

.wrapper input[type="text"] {
    position: relative;
}

.wrapper input[type="text"]:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 0px;
    left: -5px;
    content: "\f007";
}

मेरे पास डिफ़ॉल्ट फॉन्ट भयानक सीएसएस में घोषित चेहरा है, इसलिए मुझे यकीन नहीं था कि यदि ऊपर फ़ॉन्ट-परिवार जोड़ना सही दृष्टिकोण था।

 @font-face {
     font-family: 'FontAwesome';
     src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
     src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
 }

Comments

तुम क्या जानना चाहते हो? प्रश्न / त्रुटि क्या है?

— आवंटित

@allcaps ऊप्स..मैं मानता हूं कि मेरे मूल पोस्ट को देखने से जो त्रुटि हो रही है, उसे पहचानने का कोई तरीका नहीं है। मैंने थोड़ा संपादन किया।

— सेन्ग ली

देखिये मेरा अपडेटेड जवाब।

— allcaps

Answer 1

आप सही हे। : पहले और: छद्म सामग्री के बाद की तरह सामग्री imgऔर inputतत्वों की जगह पर काम करने का इरादा नहीं है । एक रैपिंग एलिमेंट जोड़ना और एक फॉन्ट-फैमिली घोषित करना एक संभावनाओं में से एक है, जैसा कि एक बैकग्राउंड इमेज का उपयोग करना है। या हो सकता है कि एक html5 प्लेसहोल्डर पाठ आपकी आवश्यकताओं के अनुरूप हो:

<input name="username" placeholder="&#61447;">

प्लेसहोल्डर विशेषता का समर्थन नहीं करने वाले ब्राउज़र बस इसे अनदेखा कर देंगे।

अपडेट करें

पहले सामग्री चयनकर्ता इनपुट का चयन करता है input[type="text"]:before:। आप आवरण का चयन करना चाहिए: .wrapper:before। Http://jsfiddle.net/allcaps/gA4rx/ देखें । मैंने प्लेसहोल्डर के सुझाव को भी जोड़ा जहां रैपर बेमानी है।

.wrapper input[type="text"] {
    position: relative; 
}

input { font-family: 'FontAwesome'; } /* This is for the placeholder */

.wrapper:before {
    font-family: 'FontAwesome';
    color:red;
    position: relative;
    left: -5px;
    content: "\f007";
}

<p class="wrapper"><input placeholder="&#61447; Username"></p>

मैदान छोड़ना

फ़ॉन्ट विस्मयकारी रूप से यूनिकोड प्राइवेट यूज़ एरिया (PUA) का उपयोग आइकनों को संग्रहित करने के लिए करता है। अन्य वर्ण मौजूद नहीं हैं और ब्राउज़र डिफ़ॉल्ट पर वापस आते हैं। यह किसी भी अन्य इनपुट के समान होना चाहिए। यदि आप इनपुट तत्वों पर एक फॉन्ट को परिभाषित करते हैं, तो उन फॉन्ट के रूप में उसी फॉन्ट की आपूर्ति करते हैं, जहां हम एक आइकन का उपयोग करते हैं। ऐशे ही:

input { font-family: 'FontAwesome', YourFont; }

Comments

अपने प्लेसहोल्डर विधि का उपयोग करना काम करता है। परेशानी यह है कि सामान्य (गैर-आइकन) पाठ बाकी पेज के फ़ॉन्ट-चेहरे से मेल नहीं खाता है और ब्राउज़र डिफ़ॉल्ट सेरिफ़ के रूप में प्रदर्शित होता है। किसी भी तरह से यह चारों ओर पाने के लिए?

— १

फ़ॉन्ट विस्मयकारी रूप से यूनिकोड प्राइवेट यूज़ एरिया (PUA) का उपयोग आइकनों को संग्रहित करने के लिए करता है। अन्य वर्ण मौजूद नहीं हैं और ब्राउज़र डिफ़ॉल्ट पर वापस आते हैं। यह किसी भी अन्य इनपुट के समान होना चाहिए। यदि आप कहीं इनपुट तत्वों पर एक फॉन्ट को परिभाषित करते हैं, तो उसी फॉन्ट की आपूर्ति करें जहां हम एक आइकन का उपयोग करते हैं input { font-family: 'FontAwesome' YourFont; }। क्या यह मदद करता है? आप हमेशा एक नया सवाल पूछ सकते हैं।

— 18'14

@ प्लेसहोल्डर काम करने वाले लोगों के लिए फॉलबैक फॉन्ट-परिवार का उपयोग करने की सिफारिश करता है !! मैंने फॉलबैक के माध्यम से फ़ॉन्ट बदलने के लिए नहीं सोचा था। क्या आप भविष्य के उपयोगकर्ताओं के लिए फ़ॉलबैक फ़ॉन्ट शामिल करने के लिए अपने उत्तर को अपडेट कर सकते हैं? धन्यवाद!

— प्रोफाइलटाइविस्ट

मुझे कोड की सूची कहां मिल सकती है मेरा मतलब है & # 61447;

— एलेर

@Elyor: आपको html निकाय का उपयोग करने की आवश्यकता नहीं है। यदि आपकी परियोजना UTF-8 है, तो आप बस फ़ॉन्ट भयानक ग्लिफ़ पेस्ट कर सकते हैं। यह संभवतः आपके कोड संपादक में एक ब्लॉक के रूप में दिखाई देगा, लेकिन यह ठीक है। आप कई ऑनलाइन यूनिकोड-टू-एचटीएमएल-एंटिटीज़-कन्वर्टर्स में से एक का भी उपयोग कर सकते हैं।

— 17

Answer 2

आउटपुट:

HTML:

<input name="txtName" id="txtName">

<span class="fa fa-info-circle errspan"></span>

सीएसएस:

<style type="text/css">
    .errspan {
        float: right;
        margin-right: 6px;
        margin-top: -20px;
        position: relative;
        z-index: 2;
        color: red;
    }
</style>

(या)

आउटपुट:

HTML:

<div class="input-wrapper">
     <input type="text" />
 </div>

सीएसएस:

<style type="text/css">
    .input-wrapper {
        display:inline-block;
        position: relative
    }
    .input-wrapper:after {
        font-family: 'FontAwesome';
        content: '\f274';
        position: absolute;
        right: 6px;
    }
</style>

Comments

पाठ बॉक्स के साथ फ़ॉन्ट-भयानक का उपयोग करने पर यह उत्कृष्ट टिप था।

— सुनील

क्या उस आइकन को क्लिक करने योग्य बनाना संभव है?

— FrenkyB

@FrenkyB, हाँ। <span class = "fa fa-info-सर्कल इरफ़ान" onclick = 'your_FUNCTION ()'> </ span>

— पलानीकुमार

z-index: 1जब आप आइकन पर क्लिक करते हैं तो सेटिंग अंतर्निहित इनपुट को फोकस को पकड़ लेगी - ऐसा कुछ जो आप उदाहरण के लिए चाहते हो सकता है जब एक डेटपिकर जोड़ते हैं।

— रोमारिकड्रिगन

मेरे लिए ठीक काम करता है लेकिन मैंने उपयोग नहीं किया position: relative(नकारात्मक मार्जिन की आवश्यकता नहीं है) और न ही z-index(जैसे ही इनपुट के बाद तत्व प्रदान किया गया है)

— पियरे डे लेसपिन

Answer 3

आप एक आवरण का उपयोग कर सकते हैं। आवरण के अंदर, फ़ॉन्ट भयानक तत्व i और तत्व जोड़ें input।

<div class="wrapper">
    <i class="fa fa-icon"></i>
    <input type="button">
</div>

फिर आवरण की स्थिति को सापेक्ष में सेट करें:

.wrapper { position: relative; }

और फिर iतत्व की स्थिति को निरपेक्ष पर सेट करें, और इसके लिए सही स्थान निर्धारित करें:

i.fa-icon { position: absolute; top: 10px; left: 50px; }

(यह एक हैक है, मुझे पता है, लेकिन यह काम हो जाता है।)

Comments

हमें वहां .wpper की आवश्यकता क्यों है?

— अशफ़ाक़ राइफ़े

जैसा कि मैं इसे समझता हूं, निकटतम तत्व निकटतम 'पूर्वज' पूर्वज के सापेक्ष रखे जाते हैं। स्थिति: सापेक्ष का मतलब है कि आवरण 'स्थिति' है (यह निरपेक्ष, स्थिर या चिपचिपा भी हो सकता है)। यदि आप ऐसा नहीं करते हैं, तो आइकन डोम में उच्चतर किसी अन्य तत्व के सापेक्ष पूरी तरह से स्थित होगा (या यदि कोई पोस्ट किए गए तत्व नहीं मिलते हैं, तो व्यूपोर्ट के सापेक्ष)।

— जाकेन एचघर

Answer 4

यदि आपको निम्नलिखित शर्तों की आवश्यकता है तो यह उत्तर आपके लिए काम करेगा। (वर्तमान उत्तरों में से कोई भी इन शर्तों को पूरा नहीं करता है):

1. आइकन टेक्स्ट बॉक्स के अंदर है
2. जब पाठ इनपुट में दर्ज किया जाता है, तो आइकन गायब नहीं होना चाहिए, और दर्ज किया गया पाठ आइकन के दाईं ओर जाता है
3. आइकन पर क्लिक करके अंतर्निहित इनपुट को फ़ोकस में लाना चाहिए

मेरा मानना ​​है कि इन स्थितियों को पूरा करने के लिए 3 HTML तत्वों की न्यूनतम संख्या है:

.input-icon{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
  <input id="stuff">
  <label for="stuff" class="fa fa-user input-icon"></label>
</div>

Comments

इनपुट फ़ील्ड के अंदर आइकन होने के लिए सबसे अच्छा उत्तर, जहां उपयोगकर्ता प्रकारों के दौरान आइकन दिखाई देता है।

— ऑब्जेक्टिव

शीर्ष: कैल्क (50% - 0.5em) मानती है कि आपके लेबल की 1em ऊंचाई है

— drichar

@drichar - मैंने अभी-अभी परीक्षण किया है, यह अभी भी किसी भी लेबल ऊंचाई के साथ काम करता है। जब तक आप लंबवत रूप से लेबल के भीतर लेबल पाठ को संरेखित नहीं करते हैं (जो कि डिफ़ॉल्ट नहीं है) चूंकि यह डिफ़ॉल्ट रूप से शीर्ष पर संरेखित होता है, एक लंबा लेबल अभी भी सही ढंग से काम करेगा। मैंने लेबल और इनपुट पर विभिन्न फ़ॉन्ट आकारों के साथ भी परीक्षण किया। यह सभी परिदृश्यों में काम करने लगता है।

— स्कीट

@ SkeetsO'Reilly मैं सही खड़ा हूं। मैं उन्हें और रीमेक को भ्रमित कर रहा हूं। फ़ॉन्ट आकार जो भी हो, 0.5em आधा है। महान समाधान, मैं इसे एक परियोजना में उपयोग कर रहा हूं (सिर्फ कस्टम एसवीजी का उपयोग कर रहा हूं, एफए का नहीं, जिसका कोई फ़ॉन्ट आकार नहीं है, जिससे मेरी स्थिति जारी हो गई, और गलत टिप्पणी हुई)

— drichar

Answer 5

बहुत कोड करने की आवश्यकता नहीं है ... बस निम्नलिखित चरणों का पालन करें:

<input id="input_search" type="text" class="fa" placeholder="&#xf002 Search">

आप यहां यूनिकोड ( फॉन्टव्यू ) के लिंक पा सकते हैं ...

माउस के लिए FontAwesome यूनिकोड

Comments

क्या होगा अगर मैं पहले से ही प्लेसहोल्डर के लिए एक और फ़ॉन्ट-परिवार का उपयोग कर रहा हूं? तब यह काम नहीं करेगा। क्या टेक्स्ट को "खोज" बनाने का कोई तरीका है & # xf002 खोज "कस्टम फ़ॉन्ट का उपयोग करें और यूनिकोड अभी भी फ़ॉन्ट फ़ॉन्ट का उपयोग करता है?

— सुष्मिता सागर

Answer 6

.input-icon{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
  <input id="stuff">
  <label for="stuff" class="fa fa-user input-icon"></label>
</div>

Comments

नमस्ते कृपया आप समाधान के लिए थोड़ा स्पष्टीकरण संलग्न करें।

— आदित्य ठाकुर

यह उत्तर आपके लिए तब काम करेगा जब आपको निम्नलिखित शर्तों की आवश्यकता होती है (वर्तमान उत्तरों में से कोई भी इन शर्तों को पूरा नहीं करता है): आइकन पाठ बॉक्स के अंदर होता है जब पाठ इनपुट में दर्ज किया जाता है, तो आइकन गायब नहीं होना चाहिए, और दर्ज किया गया पाठ अंदर चला जाता है आइकन के दाईं ओर क्लिक करने पर आइकन को अंतर्निहित इनपुट को ध्यान में लाना चाहिए, मेरा मानना ​​है कि स्थितियों को संतुष्ट करने के लिए 3 HTML तत्वों की न्यूनतम संख्या है

— ओला ओलुशसी

Answer 7

इस सवाल के विभिन्न संस्करणों को पढ़ने और आसपास खोज करने के बाद मैं काफी साफ, js-free, समाधान के साथ आया हूं। यह @allcaps समाधान के समान है, लेकिन इनपुट फ़ॉन्ट के मुद्दे को मुख्य दस्तावेज़ फ़ॉन्ट से दूर रखने से बचा जाता है।

प्लेसहोल्डर टेक्स्ट को विशेष रूप से स्टाइल करने के लिए ::input-placeholderविशेषता का उपयोग करें । यह आपको अपने आइकन फ़ॉन्ट को प्लेसहोल्डर फ़ॉन्ट और आपके शरीर (या अन्य फ़ॉन्ट) को वास्तविक इनपुट टेक्स्ट के रूप में उपयोग करने की अनुमति देता है। वर्तमान में आपको विक्रेता-विशिष्ट चयनकर्ताओं को निर्दिष्ट करने की आवश्यकता है।

यह तब तक काम करता है जब तक आपको अपने इनपुट तत्व में आइकन और टेक्स्ट के संयोजन की आवश्यकता नहीं होती है। यदि आप ऐसा करते हैं, तो आपको शब्दों के लिए प्लेसहोल्डर पाठ को डिफ़ॉल्ट ब्राउज़र फ़ॉन्ट (खान पर सादा सेरिफ़) के साथ रखना होगा।

जैसे
HTML

<p class="wrapper">
    <input class="icon" type="text" placeholder="&#61442;" />
</p>

सीएसएस

.wrapper {
    font-family:'arial', sans-serif;
}
input.icon::-webkit-input-placeholder {
    font-family:'FontAwesome';
}

ब्राउज़र उपसर्ग चयनकर्ताओं के साथ फ़ेल्ड: http://jsfiddle.net/gA4rx/78/

ध्यान दें कि आपको प्रत्येक ब्राउज़र-विशिष्ट चयनकर्ता को एक अलग नियम के रूप में परिभाषित करने की आवश्यकता है। यदि आप उन्हें जोड़ते हैं तो ब्राउज़र इसे अनदेखा कर देगा।

Comments

हालांकि यह एक सुंदर समाधान है, यह अपेक्षित व्यवहार को प्राप्त नहीं करता है।

— ओलिवियर रिफालो

वास्तव में, ऐसा लगता है कि वेबकिट ब्राउज़र ही हैं जो font-familyइस समय इस चयनकर्ता के लिए स्वीकार करते हैं । हम भविष्य में और अधिक व्यापक स्वीकृति की आशा कर सकते हैं।

— हैरी

Answer 8

मुझे बूटस्ट्रैप 4 का उपयोग करने का सबसे आसान तरीका मिला।

<div class="input-group mb-3">
    <div class="input-group-prepend">
    <span class="input-group-text"><i class="fa fa-user"></i></span></div>
    <input type="text"/>
</div>

Answer 9

मैंने ऐसा ही हासिल किया

  form i {
    left: -25px;
    top: 23px;
    border: none;
    position: relative;
    padding: 0;
    margin: 0;
    float: left;
    color: #29a038;
  }

<form>

  <i class="fa fa-link"></i>

  <div class="form-group string optional profile_website">
    <input class="string optional form-control" placeholder="http://your-website.com" type="text" name="profile[website]" id="profile_website">
  </div>

  <i class="fa fa-facebook"></i>
  <div class="form-group url optional profile_facebook_url">
    <input class="string url optional form-control" placeholder="http://facebook.com/your-account" type="url" name="profile[facebook_url]" id="profile_facebook_url">
  </div>

  <i class="fa fa-twitter"></i>
  <div class="form-group url optional profile_twitter_url">
    <input class="string url optional form-control" placeholder="http://twitter.com/your-account" type="url" name="profile[twitter_url]" id="profile_twitter_url">
  </div>

  <i class="fa fa-instagram"></i>
  <div class="form-group url optional profile_instagram_url">
    <input class="string url optional form-control" placeholder="http://instagram.com/your-account" type="url" name="profile[instagram_url]" id="profile_instagram_url">
  </div>

  <input type="submit" name="commit" value="Add profile">
</form>

परिणाम इस तरह दिखता है:

पक्षीय लेख

कृपया ध्यान दें कि मैं रूबी ऑन रेल्स का उपयोग कर रहा हूं, इसलिए मेरा परिणामी कोड थोड़ा उड़ा हुआ लग रहा है। स्लिम में व्यू कोड वास्तव में बहुत संक्षिप्त है:

i.fa.fa-link
= f.input :website, label: false

i.fa.fa-facebook
= f.input :facebook_url, label: false

i.fa.fa-twitter
= f.input :twitter_url, label: false

i.fa.fa-instagram
= f.input :instagram_url, label: false

Answer 10

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

जिस तरह हम बैकग्राउंड इमेज और टेक्स्ट के साथ करते हैं, वैसे ही हम यहां करेंगे। मुझे लगता है कि यह शुरुआती लोगों के लिए भी अच्छा है, क्योंकि सीएसएस पोजिशनिंग एक ऐसी चीज है जिसे एक शुरुआती को अपनी कोडिंग यात्रा की शुरुआत में सीखना चाहिए, इसलिए कोड को समझना और पुन: उपयोग करना आसान है।

    <div class="searchbar-wrapper">
      <i class="fa fa-search searchbar-i" aria-hidden="true"></i>
      <input class="searchbar-input" type="search" placeholder="Search...">
    </div>

    .searchbar-wrapper{
      position:relative;
    }

    .searchbar-i{
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 0 .5rem;
    }

    .searchbar-input{
      padding-left: 2rem;
    }

Answer 11

एलकैप सुझाव पर निर्माण। यहाँ HTML की कम से कम राशि के साथ फ़ॉन्ट-भयानक पृष्ठभूमि विधि है:

<div class="wrapper"><input></div>

.wrapper {
    position: relative; 
}

input { padding-left: 20px; }

.wrapper:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 2px;
    left: 3px;
    content: "\f007";
}

Answer 12

पाठ इनपुट तत्व के अंदर फ़ोकस करने के लिए क्लिक करने योग्य आइकन बनाएं।

सीएसएस

.myClass {
    font-size:20px;
    position:absolute; top:10px; left:10px;
}

एचटीएमएल

<div>
    <label style="position:relative;">
         <i class="myClass fa fa-address-book-o"></i>
         <input class="w3-input" type="text" style="padding-left:40px;">
    </label>
</div>

<i>फ़ॉन्ट विस्मयकारी लाइब्रेरी से, जो भी आप टैग के अंदर चाहते हैं, उसे जोड़ें और परिणामों का आनंद लें।

Answer 13

<HTML>
<head>
<style>
.inp1{
color:#2E64FE;
width:350px;
height:35px;
border:solid;
font-size:20px;
text-align:left;
}
</style>
</head>

<body>

<div class="inp1">          
<a href="#" class=""><i class="fa fa-search"></i></a>
</div>

Comments

यह ओपी के लिए अधिक उपयोगी होगा यदि आप इस कोड ब्लॉक के बारे में कुछ स्पष्टीकरण देते हैं!

— किम

Answer 14

विशुद्ध रूप से सीएसएस

input[type=search] {
    min-width: 320px;
    height: 24px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    margin-top: 6px;
    background-image: url('/img/search.png');
    background-size: 16px;
    background-position: 280px;
    background-repeat: no-repeat;
}

Comments

क्या आप अपना उत्तर बता सकते हैं, कृपया

— ई। ज़ेटजिनिन

Answer 15

inputआइकन को रखने के लिए मेरे पास एक रिश्तेदार कंटेनर होना चाहिए । उस बाहरी कंटेनर में ::afterवांछित आइकन होता है, absoluteजिसे कंटेनर में रखा जाता है।

HTML:

<div class="button__outer">
    <input type="submit" class="button" value="Send"/>
</div>

SASS कोड:

.button {
 display: inline-block;
 width: auto;
 height: 60px;
 line-height: 60px;
}

.button__outer {
    position: relative;
    display: inline-block;
    width: auto;

    &::after {
       position: absolute;
       right: 0;
       top: 0;
       height: 60px;
       line-height: 60px;
       width: 60px;
       font-family: 'FontAwesome', sans-serif;
       content: "\f054";
       color: #fff;
       font-size: 27px;
       font-weight: 700;
    }
}

Answer 16

इनपुट तत्व के अंदर एक फ़ॉन्ट-भयानक आइकन जोड़ने के लिए मेरा समाधान। यहां इनपुट तत्व के अंदर आइकन जोड़ने के लिए एक सरल कोड है। बस नीचे दिए गए कोड को कॉपी करें और जहां आप जोड़ना चाहते हैं, वहां डालें। या यदि आप आइकन बदलना चाहते हैं तो <i> टैग में अपना आइकन कोड डालें।

<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.soft-codeon {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 50%;
  margin-bottom: 15px;
}

.icon {
  padding: 10px;
  background: linear-gradient(to right, #ec008c, #fc6767); 
  color: white;
  min-width: 20px;
  text-align: center;
}
.soft-field {
  width: 100%;
  padding: 10px;
  outline: none;
  border:2px solid #fc6767;
}
.soft-field:focus {
  border: 2px solid #ec008c;
}
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="soft-codeon">
    <i class="fa fa-user icon"></i>
    <input class="soft-field" type="text" placeholder="Username" name="usrnm">
  </div>
  <div class="soft-codeon">
    <i class="fa fa-envelope icon"></i>
    <input class="soft-field" type="text" placeholder="Email" name="email">
  </div>

Comments

उत्तर सहायक है, लेकिन जो वाक्य स्पैम है उसे अनुमति नहीं है। यदि आप ऐसा कुछ चाहते हैं, तो आप अपनी प्रोफ़ाइल में एक लिंक डाल सकते हैं।

— Makyen

हालांकि यह कोड स्निपेट प्रश्न को हल कर सकता है, जिसमें स्पष्टीकरण सहित वास्तव में आपकी पोस्ट की गुणवत्ता में सुधार करने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए प्रश्न का उत्तर दे रहे हैं, और उन लोगों को आपके कोड सुझाव के कारणों का पता नहीं चल सकता है।

— क्लिजस्टर्स

Answer 17

फ़ॉन्ट विस्मयकारी संस्करण के कारण कभी-कभी आइकन दिखाई नहीं देगा। संस्करण 5 के लिए, सीएसएस होना चाहिए

.dropdown-wrapper::after {
     content: "\f078";
     font-family: 'Font Awesome 5 Free';
     font-weight: 900;
     color: #000;
     position: absolute;
     right: 6px;
     top: 10px;
     z-index: 1;
     width: 10%;
     height: 100%;
     pointer-events: none;
}

Answer 18

आसान तरीका है, लेकिन आपको बूटस्ट्रैप की आवश्यकता है

 <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fa fa-envelope"></i></span> <!-- icon envelope "class="fa fa-envelope""-->
    </div>
    <input type="email" id="senha_nova" placeholder="Email">
  </div><!-- input-group -->

Answer 19

::-webkit-search-cancel-button {
        height: 10px;
        width: 10px;
        display: inline-block;
        /*background-color: #0e1d3033;*/
        content: "&#f00d;";
        font-family: FontAwesome;
        font-weight: 900;
        -webkit-appearance: searchfield-cancel-button !important;
    }
    input#searchInput {
        -webkit-appearance: searchfield !important;
    }

<input data-type="search" type="search" id="searchInput" class="form-control">

Answer 20

मैंने नीचे दिए गए सामान की कोशिश की और यह वास्तव में अच्छी तरह से HTML काम करता है

input.hai {
    width: 450px;
    padding-left: 25px;
    margin: 15px;
    height: 25px;
    background-image: url('https://cdn4.iconfinder.com/data/icons/casual-events-and-opinions/256/User-512.png') ;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: left;
    background-color: grey;
}

<div >

    <input class="hai" placeholder="Search term">

</div>

Comments

सवाल फ़ॉन्ट भयानक माउस का उपयोग कर के बारे में है

— gaitat

Answer 21

यूनिकोड या fontawesome के साथ इस काम के लिए, आप एक जोड़ने चाहिए spanसाथ classनीचे की तरह:

HTML में:

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

सीएसएस में:

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

Comments

इससे टेक्स्ट इनपुट के अंदर आइकन नहीं आएगा

— Gianfranco P.

Answer 22

<!doctype html>
<html>
  <head>
    ## Heading ##
    <meta charset="utf-8">
      <title>
        Untitled Document
      </title>
      </head>
      <style>
        li {
          display: block;
          width: auto;
        }
        ul li> ul li {
          float: left;
        }
        ul li> ul {
          display: none;
          position: absolute;
        }
        li:hover > ul {
          display: block;
          margin-left: 148px;
          display: inline;
          margin-top: -52px;
        }
        a {
          background: #f2f2ea;
          display: block;
          /*padding:10px 5px;
          */
          width: 186px;
          height: 50px;
          border: solid 2px #c2c2c2;
          border-bottom: none;
          text-decoration: none;
        }
        li:hover >a {
          background: #ffffff;
        }
        ul li>li:hover {
          margin: 12px auto 0px auto;
          padding-top: 10px;
          width: 0;
          height: 0;
          border-top: 8px solid #c2c2c2;
        }
        .bottom {
          border-bottom: solid 2px #c2c2c2;
        }
        .sub_m {
          border-bottom: solid 2px #c2c2c2;
        }
        .sub_m2 {
          border-left: none;
          border-right: none;
          border-bottom: solid 2px #c2c2c2;
        }
        li.selected {
          background: #6D0070;
        }
        #menu_content {
          /*float:left;
          */

        }
        .ca-main {
          padding-top: 18px;
          margin: 0;
          color: #34495e;
          font-size: 18px;
        }
        .ca-sub {
          padding-top: 18px;
          margin: 0px 20px;
          color: #34495e;
          font-size: 18px;
        }
        .submenu a {
          width: auto;
        }
        h2 {
          text-align: center;
        }
      </style>
      <body>
        <ul>
          <li>
            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 1
                </h2>
              </div>
            </a>
            <ul class="submenu" >
              <li>
                <a href="#" class="sub_m">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_1
                    </h2>
                  </div>
                </a>
              </li>
              <li>

                <a href="#" class="sub_m2">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_2
                    </h2>
                  </div>
                </a>
              </li>
              <li >

                <a href="#" class="sub_m">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_3
                    </h2>
                  </div>
                </a>

              </li>
            </ul>
          </li>
          <li>

            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 2
                </h2>
              </div>
            </a>
          </li>
          <li>

            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 3
                </h2>
              </div>
            </a>

          </li>
          <li>

            <a href="#"  class="bottom">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 4
                </h2>
              </div>
            </a>

          </li>
        </ul>
      </body>
</html>