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



Answers

आउटपुट:

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

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

मैंने इसी सवाल से समाधान में से एक को आजमाया है कि यह जानकर कि background-image संपत्ति काम नहीं करेगी क्योंकि फ़ॉन्ट विस्मयकारी एक फ़ॉन्ट है।

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

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



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

एचटीएमएल में:

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



ऑलकैप्स सुझाव पर बिल्डिंग। कम से कम 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";
}



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

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

आप यूनिकोड ( fontawesome ) के लिंक यहां पा सकते हैं ...

आइकन के लिए FontAwesome यूनिकोड




मुझे बूटस्ट्रैप 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>



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

  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>




Links