बूटस्ट्रैप ग्लिफ़िकॉन को इनपुट बॉक्स में जोड़ें

Question

मैं एक टेक्स्ट प्रकार इनपुट बॉक्स में एक ग्लिफ़िकॉन कैसे जोड़ सकता हूं? उदाहरण के लिए मुझे उपयोगकर्ता नाम इनपुट में 'आइकन-उपयोगकर्ता' चाहिए, कुछ इस तरह:

Comments

यह मेरा वैकल्पिक समाधान है (2014 के लिए) JSFiddle [ jsfiddle.net/rcotrina94/cyCFS/272 ]

— रिचर्ड

पार्टी के लिए देर से लेकिन मेरे जवाब की जाँच करें, उस प्रभाव को प्राप्त करने के लिए केवल बूटस्ट्रैप का उपयोग करके, और सीएसएस की दो पंक्तियों का उपयोग करके रंग और बॉर्डर को बदलने के लिए। यह अन्य मुद्दों को हल करता है जो उत्तर खंड में चर्चा की गई थी stackoverflow.com/a/40945821/2914407

— धीरज

Answer 1

बूटस्ट्रैप के बिना:

हम बूटस्ट्रैप को एक सेकंड में प्राप्त कर लेंगे, लेकिन यहां मूल CSS अवधारणाओं को खेलने के लिए यह स्वयं करना है। शिकार की दाढ़ी के रूप में , आप सीएसएस के साथ इनपुट तत्व के अंदर आइकन को बिल्कुल स्थिति में रखकर कर सकते हैं। फिर दोनों ओर पैडिंग जोड़ें ताकि टेक्स्ट आइकन के साथ ओवरलैप न हो।

तो निम्न HTML के लिए:

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

आप बाएँ और दाएँ संरेखित ग्लिफ़ के लिए निम्न CSS का उपयोग कर सकते हैं:

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

प्लंकर में डेमो

नोट : यह अनुमान है कि आप ग्लिफ़िकॉन का उपयोग कर रहे हैं , लेकिन फ़ॉन्ट-कमाल के साथ समान रूप से अच्छी तरह से काम करता है ।
एफए के लिए, बस के .glyphiconसाथ बदलें.fa

---

बूटस्ट्रैप के साथ:

जैसा कि बफर बताते हैं , यह वैकल्पिक रूप से वैकल्पिक प्रतीक के साथ सत्यापन राज्यों का उपयोग करके बूटस्ट्रैप के भीतर पूरा किया जा सकता है । यह .form-groupतत्व को और कक्षा .has-feedbackको आइकन देता है .form-control-feedback।

सबसे सरल उदाहरण कुछ इस तरह होगा:

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

पेशेवरों :

• विभिन्न प्रकारों के लिए समर्थन शामिल है (मूल, क्षैतिज, इनलाइन)
• विभिन्न नियंत्रण आकारों के लिए समर्थन शामिल है (डिफ़ॉल्ट, छोटा, बड़ा)

विपक्ष :

• बाएँ संरेखित आइकन के लिए समर्थन शामिल नहीं है

विपक्ष को दूर करने के लिए, मैंने बाईं ओर दिए गए आइकन का समर्थन करने के लिए परिवर्तनों के साथ इस पुल-अनुरोध को एक साथ रखा । जैसा कि यह एक अपेक्षाकृत बड़ा बदलाव है, इसे भविष्य के रिलीज तक बंद कर दिया गया है, लेकिन अगर आपको इन सुविधाओं की आवश्यकता है आज है , तो यहां एक सरल कार्यान्वयन है:

बस में शामिल इन प्रपत्र सीएसएस में परिवर्तन (भी तल पर छिपे हुए ढेर टुकड़ा के माध्यम से inlined)
_{* कम वैकल्पिक रूप से, अगर आप कर रहे हैं: कम के माध्यम से निर्माण , यहां देखें कि प्रपत्र परिवर्तन भी कम समय में}

फिर, आपको .has-feedback-leftकेवल उस समूह को शामिल करना है जिसमें .has-feedbackआइकन को बाईं ओर संरेखित करने के लिए कक्षा है।

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

यहां प्लंकर में एक डेमो दिया गया है

जोड़ने के पीएस फ्रेज़ी के सुझाव को बूटस्ट्रैपpointer-events: none; में जोड़ा गया है

क्या आप के लिए देख रहे थे नहीं मिला ? इन समान प्रश्नों का प्रयास करें:

• इनपुट बॉक्स में Twitter बूटस्ट्रैप आइकन जोड़ें
• टेक्स्ट बॉक्स बूटस्ट्रैप के पास सर्च आइकन डालें

बाएं संरेखित फ़ीडबैक आइकन के लिए एडिशन सीएसएस

.has-feedback .form-control {
  padding-right: 34px;
}
.has-feedback .form-control.input-sm,
.has-feedback.form-group-sm .form-control {
  padding-right: 30px;
}
.has-feedback .form-control.input-lg,
.has-feedback.form-group-lg .form-control {
  padding-right: 46px;
}
.has-feedback-left .form-control {
  padding-right: 12px;
  padding-left: 34px;
}
.has-feedback-left .form-control.input-sm,
.has-feedback-left.form-group-sm .form-control {
  padding-left: 30px;
}
.has-feedback-left .form-control.input-lg,
.has-feedback-left.form-group-lg .form-control {
  padding-left: 46px;
}
.has-feedback-left .form-control-feedback {
  left: 0;
}
.form-control-feedback {
  line-height: 34px !important;
}
.input-sm + .form-control-feedback,
.form-horizontal .form-group-sm .form-control-feedback {
  width: 30px;
  height: 30px;
  line-height: 30px !important;
}
.input-lg + .form-control-feedback,
.form-horizontal .form-group-lg .form-control-feedback {
  width: 46px;
  height: 46px;
  line-height: 46px !important;
}
.has-feedback label.sr-only ~ .form-control-feedback,
.has-feedback label.sr-only ~ div .form-control-feedback {
  top: 0;
}
@media (min-width: 768px) {
  .form-inline .inline-feedback {
    position: relative;
    display: inline-block;
  }
  .form-inline .has-feedback .form-control-feedback {
    top: 0;
  }
}
.form-horizontal .has-feedback-left .form-control-feedback {
  left: 15px;
}

Comments

मेरा संपादन देखें, मैंने ध्यान केंद्रित के css चयनकर्ता को अधिक स्पष्ट कर दिया है, अन्यथा यह .input-group-addon द्वारा अधिलेखित हो जाता है।

— मिशेल मुलर

@ मिशेलमुलर, मुझे यकीन नहीं है कि मैं आपके सुझाए गए संपादन में मूल्य देख सकता हूं। .focusedInputकक्षा के बाद परिभाषित किया गया है .input-group-addon, इसलिए जब स्टाइल शीट कास्केड नीचे, बाद शैलियों पूर्वता लेना चाहिए। क्या आप उस परिदृश्य का बेहतर वर्णन कर सकते हैं जिसके कारण यह मुद्दा बना?

— काइलमिट

मैं "सूचक-घटनाओं को जोड़ने का सुझाव देता हूं: कोई नहीं?" आइकन के लिए, क्योंकि डिफ़ॉल्ट रूप से वे इनपुट फ़ोकसिंग में हस्तक्षेप करते हैं।

— फ्रिज़ी

@ लिंड्रो, यह सुनिश्चित करता है! । यह सिर्फ इसलिए है क्योंकि FontAwesome ने संस्करण 4 में ब्रेकिंग परिवर्तन की शुरुआत की है। यदि आप इससे अपग्रेड करना चाहते हैं 3.x से 4.x , तो आपको बदलना <i class="icon-user"></i>होगा <i class="fa fa-user"></i>। जब भी आप बाहरी पुस्तकालयों को अपडेट करने के बारे में सोच रहे हैं, तो यह निर्धारित करने के लिए कि क्या आपका ऐप अभी भी संगत है या इसे अपग्रेड किए जाने की आवश्यकता है, यह निर्धारित करने के लिए रिलीज़ नोट्स और नए दस्तावेज़ पढ़ना सुनिश्चित करें।

— काइलमिट

@ लिंडो, आप एफए 4.0 में नए नामकरण सम्मेलनों के बारे में अधिक पढ़ सकते हैं साथ ही 3.21 से 4 तक पूर्ण प्रवास गाइड

— काइलमिट

Answer 2

आधिकारिक विधि। कोई कस्टम सीएसएस आवश्यक:

<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4"></label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-user form-control-feedback"></span>
  </div>
</form>

डेमो: http://jsfiddle.net/LS2Ek/1/

यह डेमो बूटस्ट्रैप डॉक्स में एक उदाहरण पर आधारित है। "वैकल्पिक आइकनों के साथ" यहां नीचे जाएं http://getbootstrap.com/css/#forms-control-validation

Comments

+1 - बूटस्ट्रैप में निर्मित देशी दृष्टिकोण के लिए निश्चित रूप से अच्छा है। यद्यपि यह बाईं ओर के संरेखण आइकन पर इतना गर्म नहीं करता है जैसे प्रश्न के लिए कॉल करता है, लेकिन निश्चित रूप से एक अच्छा तरीका है।

— काइलमिट

{left:0}ग्लिफ़िकॉन क्लास में जोड़ने से बाएं संरेखण का ध्यान रखना चाहिए। jsfiddle.net/LS2Ek/30 । मुझे आपकी रूपरेखा + बॉक्स-छाया दृष्टिकोण पसंद है। साफ-सुथरा दिखता है!

— उपयोगकर्ता

मूल रूप से यही मैंने भी सोचा था, लेकिन आप अलग-अलग परिस्थितियों में बहुत सारे सीएसएस काम को फिर से बनाने जा रहे हैं। यदि आप एक लेबल जोड़ते हैं , तो आपको कुछ समस्याएं दिखाई देंगी । इनलाइन फॉर्म पर, left:0अब इनपुट की शुरुआत की पहचान नहीं करता है। इसके अलावा आपको इनपुट के बाईं ओर पैडिंग जोड़ने की आवश्यकता होगी, और इसे दाईं ओर हटा दें। फिर भी, एक बहुत अच्छा और साफ समाधान। मुझे लगता है कि इनपुट के बाईं ओर की पहचान करना कठिन हिस्सा है, जो कि जहां एक आवरण के साथ position:relativeकाम आता है।

— काइलमिट

आपको इस पैच को बूटस्ट्रैप में जोड़ना चाहिए। यह एक आसान और अक्सर उपयोग की जाने वाली सुविधा है।

— उपयोगकर्ता

Answer 3

यहाँ एक CSS-only विकल्प है। मैंने इसे खोज क्षेत्र के लिए फ़ायरफ़ॉक्स (और सौ अन्य ऐप्स) के समान प्रभाव प्राप्त करने के लिए सेट किया है।

यहाँ एक बेला है ।

एचटीएमएल

<div class="col-md-4">
  <input class="form-control" type="search" />
  <span class="glyphicon glyphicon-search"></span>
</div>

सीएसएस

.form-control {
  padding-right: 30px;
}

.form-control + .glyphicon {
  position: absolute;
  right: 0;
  padding: 8px 27px;
}

Comments

+1 महान समाधान। मैंने इसे एक बाएँ और दाएँ उपयोगिता वर्ग में बदल दिया, लेकिन निश्चित रूप से सही दृष्टिकोण

— KyleMit

हाँ, इतना सरल और एकदम सही

— PeMa

Answer 4

यहाँ है कि मैंने इसे केवल डिफ़ॉल्ट बूटस्ट्रैप CSS v3.3.1 का उपयोग करके कैसे किया:

<div class="form-group">
    <label class="control-label">Start:</label>
    <div class="input-group">
        <input type="text" class="form-control" aria-describedby="start-date">
        <span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-calendar"></span></span>
    </div>
</div>

और यह कैसा दिखता है:

Answer 5

यह 'धोखा' साइड इफेक्ट के साथ काम करेगा कि ग्लिफ़िकॉन वर्ग इनपुट नियंत्रण के लिए फ़ॉन्ट को बदल देगा।

बेला

<input class="form-control glyphicon" type="search" placeholder="&#57347;"/>

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

बेला

.form-control[type="search"]::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

संभवतः एक भी क्लीनर समाधान:

बेला

सीएसएस

.form-control.glyphicon {
    font-family:inherit;
}
.form-control.glyphicon::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

एचटीएमएल

<input class="form-control glyphicon" type="search" placeholder="&#57347; search" />
<input class="form-control glyphicon" type="text"  placeholder="&#57352; username" />
<input class="form-control glyphicon" type="password"  placeholder="&#57395; password" />

Answer 6

यह बिना किसी कस्टम सीएसएस के आधिकारिक बूटस्ट्रैप 3.x संस्करण से कक्षाओं का उपयोग करके किया जा सकता है।

input-group-addonइनपुट टैग से पहले उपयोग करें , input-groupफिर अंदर किसी भी ग्लिफ़कॉन का उपयोग करें, यहां कोड है

<form>
  <div class="form-group">
    <div class="col-xs-5">
      <div class="input-group">
          <span class="input-group-addon transparent"><span class="glyphicon glyphicon-user"></span></span>
          <input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
      </div>
    </div>
  </div>
</form>

यहाँ आउटपुट है

इसे कस्टमाइज़ करने के लिए कस्टम सीएसएस की कुछ पंक्तियों को अपने स्वयं के custom.css फ़ाइल में जोड़ें (यदि आवश्यक हो तो पैडिंग समायोजित करें)

.transparent {
    background-color: transparent !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }
 .left-border-none {
    border-left:none !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }

input-group-addonपारदर्शी की पृष्ठभूमि बनाने और इनपुट टैग के बाईं ओर ढाल बनाने से इनपुट शून्य हो जाएगा। यहाँ अनुकूलित उत्पादन है

यहाँ एक jsbin उदाहरण है

यह लेबल के साथ अतिव्यापी की कस्टम सीएसएस समस्याओं को हल करेगा, उपयोग करते समय संरेखण input-lgऔर टैब मुद्दे पर ध्यान केंद्रित करेगा।

Answer 7

यहां एक गैर-बूटस्ट्रैप समाधान है जो बेस 64 यूआरआई एन्कोडिंग का उपयोग करके सीधे सीएसएस में ग्लिफ़िकॉन की छवि प्रतिनिधित्व को एम्बेड करके आपके मार्कअप को सरल रखता है।

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}

<input class="search">

Answer 8

यदि आप Fontawesome का उपयोग कर रहे हैं तो आप यह कर सकते हैं:

<input type="text" style="font-family:Arial, FontAwesome"  placeholder="&#xf007;" />

परिणाम

यूनिकोड की पूरी सूची को पूर्ण फ़ॉन्ट विस्मयकारी 4.6.3 आइकन संदर्भ में पाया जा सकता है

Answer 9

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}

<input class="search">

Comments

महान "जुगाड़" लेकिन यह वास्तव में कस्टम आइकन भी सेट करने के लिए उपयोगी है। धन्यवाद।

— ध्रुव रावल

Answer 10

यहाँ :beforeसीएसएस में छद्म तत्व का उपयोग करके ग्लिफ़िकॉन रखकर एक और तरीका है ।

JsFiddle में कार्यशील डेमो

इसके लिए HTML:

<form class="form form-horizontal col-xs-12">
    <div class="form-group">
        <div class="col-xs-7">
            <span class="usericon">
                <input class="form-control" id="name" placeholder="Username" />
            </span>
        </div>
    </div>
</form>

CSS ( बूटस्ट्रैप 3.x और वेबकिट-आधारित ब्राउज़र संगत ) का उपयोग करें

.usericon input {
    padding-left:25px;
}
.usericon:before {
    height: 100%;
    width: 25px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: absolute;
    content: "\e008";
    font-family: 'Glyphicons Halflings';
    pointer-events: none;
}

जैसा कि @ श्रीजी ने कहा, हमें जोड़ना होगा pointer-events: none; ताकि कर्सर इनपुट फ़ोकस में हस्तक्षेप न करे। अन्य सभी सीएसएस नियम उचित रिक्ति को केंद्रित करने और जोड़ने के लिए हैं।

परिणाम:

Answer 11

आप इसके यूनिकोड HTML का उपयोग कर सकते हैं

तो उपयोगकर्ता आइकन जोड़ने के लिए , बस में जोड़ेंplaceholder विशेषता में , या जहाँ आप चाहें।

आप इस धोखा शीट की जांच करना चाह सकते हैं ।

उदाहरण:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder="&#xe008; placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value="&#xe008; value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value="&#xe008; submit-button" style="font-family: 'Glyphicons Halflings', Arial">

निम्न कोड का उपयोग करके, ग्लिफ़िकॉन के लिए इनपुट के फ़ॉन्ट को सेट करना न भूलें: font-family: 'Glyphicons Halflings', Arialजहां इनपुट में नियमित पाठ का फ़ॉन्ट एरियल है।

Answer 12

मेरा भी इस मामले में बूटस्ट्रैप 3.3.5 के साथ एक निर्णय है:

<div class="col-sm-5">
    <label for="date">
       <input type="date" placeholder="Date" id="date" class="form-control">         
    </label>
    <i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>

इनपुट पर मेरे पास कुछ इस तरह है:

Answer 13

बूटस्ट्रैप 4 के साथ परीक्षण किया गया।

एक ले लो form-control, और is-validउसकी कक्षा में जोड़ें । ध्यान दें कि नियंत्रण कैसे हरा हो जाता है, लेकिन इससे भी महत्वपूर्ण बात यह है कि नियंत्रण के दाईं ओर स्थित चेकमार्क आइकन पर ध्यान दें? यह ही हम चाहते है!

उदाहरण:

.my-icon {
    padding-right: calc(1.5em + .75rem);
    background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-md-5">
	<input type="text" id="date" class="form-control my-icon" placeholder="Select...">
  </div>
</div>

Answer 14

यदि आप केवल आधुनिक ब्राउज़रों की आवश्यकता के लिए भाग्यशाली हैं: अनुवाद बदलने की कोशिश करें। इसके लिए किसी रैपर की आवश्यकता नहीं होती है, और इसे अनुकूलित किया जा सकता है ताकि आप इनपुट स्पिनर को समायोजित करने के लिए इनपुट [टाइप = संख्या] के लिए अधिक रिक्ति की अनुमति दे सकें, या इसे हैंडल के बाईं ओर ले जा सकें।

    @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");


.is-invalid {
  height: 30px;
  box-sizing: border-box;
}

.is-invalid-x {
  font-size:27px;
  vertical-align:middle;
  color: red;
  top: initial;
  transform: translateX(-100%);
}




 <h1>Tasty Field Validation Icons using only css transform</h1>
    <label>I am just a poor boy nobody loves me</label>
    <input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span>

http://codepen.io/anon/pen/RPRmNq?editors=110

Answer 15

आपको मौजूदा बूटस्ट्रैप कक्षाओं और थोड़ी कस्टम स्टाइल के साथ ऐसा करने में सक्षम होना चाहिए।

<form>
    <div class="input-prepend">
        <span class="add-on">
            <i class="icon-user"></i>
        </span>
        <input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;">
    </div>         

संपादित करें आइकन को icon-userकक्षा के माध्यम से संदर्भित किया जाता है । यह उत्तर बूटस्ट्रैप संस्करण 2 के समय लिखा गया था। आप निम्न पृष्ठ पर संदर्भ देख सकते हैं: http://getbootstrap.com/2.3.2/base-css.html#images

Comments

इस उत्तर में बूटस्ट्रैप ग्लिफ़िकॉन संदर्भ नहीं देख रहा है

— किर्बी

@Kirby, आइकन को आइकन-उपयोगकर्ता वर्ग के माध्यम से संदर्भित किया जाता है। यह उत्तर बूटस्ट्रैप संस्करण 2 के समय में लिखा गया था। आप निम्न पृष्ठ पर संदर्भ देख सकते हैं - getbootstrap.com/2.3.2/base-css.html#images

— YOOOEE