मैं इनपुट क्षेत्र में फ़ॉन्ट विस्मयकारी आइकन कैसे जोड़ूं?

Question 1

मैं इनपुट के लिए फ़ॉन्ट विस्मयकारी में शामिल खोज आइकन का उपयोग कैसे करूं? मेरी साइट (PHPmotion पर आधारित) में एक खोज सुविधा है, जिसे मैं खोज के लिए उपयोग करना चाहता हूं।

यहाँ कोड है:

<div id="search-bar">

      <form method="get" action="search.php" autocomplete="off" name="form_search">
        <input type="hidden" name="type" value="videos" />
            <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
            'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
            font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; float:left; border: 1px solid black; background-color:
            #ffffff" />
            <input type="image" src="http://viddir.com/themes/default/images/search.jpg" height="30" width="30" border="0" style="float:right;"/>
        <div id="searchBoxSuggestions"></div>
        </form>
        </div>

Question 2

आप इसके बजाय किसी अन्य टैग का उपयोग कर सकते हैं और inputFontAwesome को सामान्य तरीके से लागू कर सकते हैं ।

अपने inputप्रकार के बजाय imageआप इसका उपयोग कर सकते हैं:

<i class="icon-search icon-2x"></i>

त्वरित सीएसएस :

.icon-search {
    color:white;
    background-color:black;
}

यहाँ एक त्वरित पहेली है: डेमो

आप इसे थोड़ा बेहतर ढंग से स्टाइल कर सकते हैं और इवेंट फंक्शनलिटी को i ऑब्जेक्ट में जोड़ सकते हैं, जिसे आप किसी <button type="submit">ऑब्जेक्ट का उपयोग करके iया जावास्क्रिप्ट के साथ कर सकते हैं ।

बटन का तार कुछ इस तरह होगा:

<button type="submit" class="icon-search icon-large"></button>

और सीएसएस :

.icon-search {
    height:32px;
    width:32px;
    border: none;
    cursor: pointer;
    color:white;
    background-color:black;
    position:relative;
}

यहाँ मैं के बजाय बटन के साथ अद्यतन मेरी बेला है: डेमो

अपडेट: किसी भी टैग पर FontAwesome का उपयोग करना

FontAwsome के साथ समस्या यह है कि इसकी स्टाइलशीट में :beforeतत्वों को जोड़ने के लिए छद्म तत्वों का उपयोग किया जाता है - और छद्म तत्व काम नहीं करते हैं / inputतत्वों पर अनुमति नहीं है । यही कारण है कि FontAwesome का सामान्य तरीके से उपयोग करने से काम नहीं चलेगा input।

लेकिन एक समाधान है - आप FontAwesome को नियमित फ़ॉन्ट के रूप में उपयोग कर सकते हैं जैसे:

सीएसएस:

input[type="submit"] {
    font-family: FontAwesome;
}

HTML:

<input type="submit" class="search" value="&#xf002;" />

ग्लिफ़ को valueविशेषता के मूल्यों के रूप में पारित किया जा सकता है । अलग-अलग पत्र के लिए ascii कोड / प्रतीक FontAwesome सीएसएस फ़ाइल में पाया जा सकता है, तो आप सिर्फ उन्हें तरह एक एचटीएमएल ascii संख्या में परिवर्तन करने की आवश्यकता \f002करने के लिए और यह काम करना चाहिए।

FontAwesome ascii कोड ( चीटशीट ) से लिंक करें : fortawesome.github.io/Font-Awesome/cheatsheet

आइकन के आकार को आसानी से समायोजित किया जा सकता है font-size।

inputएक jsfidde में एक तत्व का उपयोग करके उपरोक्त उदाहरण देखें :

डेमो

अपडेट: FontAwesome 5

FontAwesome संस्करण 5 के साथ इस समाधान के लिए आवश्यक सीएसएस बदल गया है - फ़ॉन्ट परिवार का नाम बदल गया है और फ़ॉन्ट वजन निर्दिष्ट किया जाना चाहिए:

input[type="submit"] {
    font-family: "Font Awesome 5 Free"; // for the open access version
    font-size: 1.3333333333333333em;
    font-weight: 900;
}

अपडेटेड फेलो बलो के लिंक के साथ @WillFastie की टिप्पणी देखें। धन्यवाद!

Question 3

यहां एक समाधान है जो सरल सीएसएस और मानक फ़ॉन्ट भयानक सिंटैक्स के साथ काम करता है, यूनिकोड मूल्यों की कोई आवश्यकता नहीं है, आदि।

आपके <input>द्वारा <i>आवश्यक आइकन के साथ एक मानक टैग के बाद एक टैग बनाएं ।
एक उच्चतर परत क्रम (z- इंडेक्स) के साथ सापेक्ष स्थिति का उपयोग करें और इनपुट क्षेत्र के ऊपर और ऊपर आइकन को स्थानांतरित करें।
(वैकल्पिक) आप मानक जेएस के माध्यम से संभवतः डेटा जमा करने के लिए आइकन को सक्रिय कर सकते हैं।

HTML / CSS / JS के लिए नीचे तीन कोड स्निपेट देखें।

या यहाँ JSField में ही: उदाहरण: http://jsfiddle.net/ethanpil/ws1g27y3/

$('#filtersubmit').click(function() {
  alert('Searching for ' + $('#filter').val());
});

#filtersubmit {
  position: relative;
  z-index: 1;
  left: -25px;
  top: 1px;
  color: #7B7B7B;
  cursor: pointer;
  width: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="filter" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>

स्निपेट का विस्तार करें

Question 4

उन लोगों के लिए, जो सोच रहे हैं कि ड्रुपल इनपुट के लिए FontAwesome आइकन्स कैसे प्राप्त करें, आपको पहले डिकोड करना होगा जैसे:

$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities('&#xf014;'), // code for FontAwesome trash icon
// etc.
);

Question 5

अपने इनपुट को बटन तत्व में बदलें और आप उस पर फ़ॉन्ट विस्मयकारी कक्षाओं का उपयोग कर सकते हैं। ग्लिफ़ का संरेखण डेमो में महान नहीं है, लेकिन आपको यह विचार मिलता है:

http://tinker.io/802b6/1

<div id="search-bar">
  <form method="get" action="search.php" autocomplete="off" name="form_search">
    <input type="hidden" name="type" value="videos" />
        <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
        'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
        font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; border: 1px solid black; background-color:
        #ffffff" /><!--
        --><button class="icon-search">Search</button>
    <div id="searchBoxSuggestions"></div>
    </form>
</div>

#search-bar .icon-search {
    width: 30px;
    height: 30px;
    background: black;
    color: white;
    border: none;
    overflow: hidden;
    vertical-align: middle;
    padding: 0;
}

#search-bar .icon-search:before {
    display: inline-block;
    width: 30px;
    height: 30px;
}

यहाँ लाभ यह है कि फार्म अभी भी पूरी तरह से कार्यात्मक है उन तत्वों के लिए इवेंट हैंडलर जोड़ने के लिए जो बटन नहीं हैं, लेकिन एक जैसे दिखते हैं।

Question 6

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

<input type="text" id="datepicker" placeholder="Change Date" value=" Sat Oct 19" readonly="readonly" class="hasDatepicker">

font-family: FontAwesome, Roboto, sans-serif;

इस तरह, FontAwesome आइकन को पकड़ लेगा, लेकिन सभी गैर-आइकन टेक्स्ट में वांछित फ़ॉन्ट लागू होगा।

Question 7

.fa-file-o {
    position: absolute;
    left: 50px;
    top: 15px;
    color: #ffffff
}

<div>
 <span class="fa fa-file-o"></span>
 <input type="button" name="" value="IMPORT FILE"/>
</div>

Question 8

नए फ़ॉन्ट भयानक के लिए सरल तरीका

  <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search" name="txtSearch"  >
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
                    </div>
                </div>

Question 9

यूनिकोड या फोंटव्यू के साथ काम करने के लिए, आपको नीचे की तरह वर्ग के साथ एक स्पैन जोड़ना चाहिए, क्योंकि इनपुट टैग छद्म वर्गों का समर्थन नहीं करता है जैसे: के बाद। यह प्रत्यक्ष समाधान नहीं है

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;   

}