205

लगता है कि फ़ॉन्ट-भयानक में इनपुट प्रकार 'सबमिट' के लिए कोई वर्ग नहीं है। क्या बटन इनपुट के लिए फ़ॉन्ट-भयानक से कुछ वर्ग का उपयोग करना संभव है? मैंने अपने अनुप्रयोगों में सभी बटन (जो वास्तव में ट्विटर से बूटस्ट्रैप से वर्ग 'बीटीएन' के साथ लिंक जोड़े हैं) पर 'इनपुट टाइप सबमिट' पर आइकन नहीं जोड़ सकते।

या, इस कोड का उपयोग कैसे करें:

input#image-button{
    background: #ccc url('icon.png') no-repeat top left;
    padding-left: 16px;
    height: 16px;
}

एचटीएमएल:

<input type="submit" id="image-button">Text</input>

(जो मैंने HTML से लिया था : फॉन्ट-कमाल के साथ टेक्स्ट + इमेज के साथ सबमिट बटन कैसे बनाएं ?

twitter-bootstrap twitter-bootstrap-rails font-awesome

— denis.peplin
स्रोत

345

इनपुट के बजाय बटन प्रकार = "सबमिट" का उपयोग करें

<button type="submit" class="btn btn-success">
    <i class="fa fa-arrow-circle-right fa-lg"></i> Next
</button>

फ़ॉन्ट विस्मयकारी 3.2.0 उपयोग के लिए

<button type="submit" class="btn btn-success">
    <i class="icon-circle-arrow-right icon-large"></i> Next
</button>

— जोआओ लमे
स्रोत

बहुत बढ़िया! उम्मीद के मुताबिक काम करता है। अभी भी simple_form के लिए इसे अनुकूलित करने या एक सहायक बनाने के लिए कुछ चरणों की आवश्यकता है, लेकिन यह अपेक्षाकृत आसान है।

— denis.peplin

19

इसके अलावा <button type=submit>और के बीच के अंतर के बारे में पता होना चाहिए <input type=submit>: stackoverflow.com/questions/3543615/…

— Pavlo

@ stanislav-mayorov यह काम करता है। यदि आप वर्तमान संस्करण 4.7 का उपयोग कर रहे हैं तो आपको 3.2.0 (2012 से) समायोजित करना होगा। अद्यतन उत्तर का प्रयास करें।

— जोआओ लेम

@JoaoLeme <button type="submit">किसी भी रूप में काम करता है ?

— रियुजो

जब मैं पृष्ठ को पुनः लोड करने से बचना चाहता हूं तो यह काम नहीं करता है।

— साल्वेरनर

87

एचटीएमएल

चूंकि <input>तत्व केवल मूल्य विशेषता प्रदर्शित करता है, हमें इसमें केवल हेरफेर करना होगा:

<input type="submit" class="btn fa-input" value="&#xf043; Input">

मैं यहां इकाई का उपयोग कर रहा हूं , जो कि U + F043 से संबंधित है, फ़ॉन्ट विस्मयकारी 'टिंट' प्रतीक है।

सीएसएस

फिर हमें इसे फ़ॉन्ट का उपयोग करने के लिए स्टाइल करना होगा:

.fa-input {
  font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

जो हमें फॉन्ट में टिंट सिंबल और दूसरे टेक्स्ट को उपयुक्त फॉन्ट में देगा।

हालाँकि, यह नियंत्रण पिक्सेल-पूर्ण नहीं होगा, इसलिए आपको इसे अपने आप से ट्विक करना पड़ सकता है।

— पाव्लो
स्रोत

1

उत्तर के लिए धन्यवाद, यह काम करता है, लेकिन मैं वास्तव में इस दृष्टिकोण का उपयोग नहीं कर सकता, क्योंकि फ़ॉन्ट पूरे मूल्य के पाठ को प्रभावित करता है। मैं अन्य बटनों में 'आइकन-लार्ज' का भी उपयोग कर रहा हूँ ... जो लोग इसे

— आज़माएँगे

मुझे लगता है कि यह सब हम यहां कर सकते हैं। व्यक्तिगत रूप से मेरा सुझाव है कि आप <input>एक आइकन को ओ / ओ छोड़ दें ।

— पावलो

ठीक काम किया है, मुझे <इनपुट प्रकार = "सबमिट"> का उपयोग करना होगा क्योंकि मेरे पास एक रूप में दो जमा हैं

— मुनिआर

यह तत्व वर्ग में "fa" जोड़ने से बेहतर है, क्योंकि "fa" तत्व की ऊंचाई को बदल देगा।

— सियावी शेन

इसके अलावा आप इनलाइन स्टाइल font-familyप्रॉपर्टी का उपयोग टेक्स्ट सामग्री वाले किसी भी HTML तत्व में कर सकते हैं ।

— सईदबाक़र

54

आप फ़ॉन्ट भयानक utf cheatsheet का उपयोग कर सकते हैं

<input type="submit" class="btn btn-success" value="&#xf011; Login"/>

यहाँ cheatsheet के लिए कड़ी है http://fortawesome.github.io/Font-Awesome/cheatsheet/

— बर्नार्ड नोंगपोह
स्रोत

2

इससे आज मेरा काम बन गया! धन्यवाद .. किसी भी अन्य उपयोगकर्ताओं के लिए, कृपया इस वाक्य पर ध्यान दें: इस पृष्ठ से सीधे अपने डिज़ाइन में आइकन ( यूनिकोड नहीं ) कॉपी करें और पेस्ट करें ( वास्तविक आइकन की नकल करें) और यह काम करेगा

— PSR

17

<input type="button" class="fa" value=" Login"/>बूटस्ट्रैप के बिना इसे काम करने के लिए पिता वर्ग का उपयोग करते हैं

— स्टैकहोला

2

यदि आप इसे जावास्क्रिप्ट या jQuery के साथ सेट करने का प्रयास कर रहे हैं, तो यूनिकोड भिन्नता का उपयोग करें:$("input.search").addClass("fa").val("\uf011 Login");

— Jamie Chong

2

यहां तक कि बूटस्ट्रैप के साथ मुझे यह काम पाने के लिए वर्ग = "fa" जोड़ना होगा।

— denis.peplin

12

खैर, तकनीकी रूप से यह संभव नहीं है :beforeऔर :afterछद्म तत्व तत्वों पर काम करते inputहैं

से W3C :

12.1 छद्म तत्वों के पहले और बाद में

लेखक छद्म तत्वों के बाद: से पहले और के साथ उत्पन्न सामग्री की शैली और स्थान को निर्दिष्ट करते हैं। जैसा कि उनके नाम इंगित करते हैं, छद्म तत्वों के पहले और बाद में: तत्व के दस्तावेज पेड़ की सामग्री से पहले और बाद में सामग्री का स्थान निर्दिष्ट करते हैं। इन छद्म तत्वों के साथ संयोजन में 'सामग्री' संपत्ति निर्दिष्ट करती है कि क्या डाला गया है।

इसलिए मेरे पास एक परियोजना थी जहां मैंने inputटैग के रूप में बटन जमा किए थे और किसी कारण से अन्य डेवलपर्स ने मुझे <button>सामान्य इनपुट सबमिट बटन के बजाय टैग का उपयोग करने के लिए प्रतिबंधित किया था , इसलिए मैं एक spanसेट के अंदर बटन लपेटने के एक और समाधान के साथ आया था । , position: relative;और फिर :afterछद्म का उपयोग करके आइकन को बिल्कुल स्थिति में लाना।

नोट: डेमो फिडल FontAwesome 3.2.1 के लिए सामग्री कोड का उपयोग करता है, इसलिए आपको contentतदनुसार संपत्ति के मूल्य को बदलने की आवश्यकता हो सकती है ।

एचटीएमएल

<span><input type="submit" value="Send" class="btn btn-default" /></span>

सीएसएस

input[type="submit"] {
    margin: 10px;
    padding-right: 30px;
}

span {
    position: relative;
}

span:after {
    font-family: FontAwesome;
    content: "\f004"; /* Value may need to be changed in newer version of font awesome*/
    font-size: 13px;
    position: absolute;
    right: 20px;
    top: 1px;
    pointer-events: none;
}

Demo

अब यहाँ सब कुछ स्व व्याख्यात्मक है यहाँ, एक संपत्ति के बारे में, यानी pointer-events: none;, मैंने इसका इस्तेमाल किया है क्योंकि :afterछद्म उत्पन्न सामग्री पर मँडरा करने पर , आपका बटन क्लिक नहीं करेगा, इसलिए मान के उपयोग noneसे उस सामग्री के माध्यम से जाने के लिए क्लिक क्रिया पर बल पड़ेगा ।

से मोज़िला डेवलपर नेटवर्क :

यह इंगित करने के अलावा कि तत्व माउस घटनाओं का लक्ष्य नहीं है, मान कोई भी माउस घटना को "तत्व" के माध्यम से जाने और उस तत्व के बजाय जो कुछ भी "नीचे" है को लक्षित करने का निर्देश देता है।

हार्ट फॉन्ट / आइकन को हॉवर करें Demoऔर देखें कि यदि आप उपयोग नहीं करते हैं तो क्या होगाpointer-events: none;

— श्री एलियन
स्रोत

1

जबकि एक बहुत ही शांत समाधान में इसका एक बड़ा उल्टा होता है : सूचक-घटनाएं: कोई भी IE <11 ( caniuse.com/#feat=pointer-events ) द्वारा समर्थित नहीं है । इसका कारण यह है कि एसवीजी तत्वों (वेक्टर ग्राफिक्स) के लिए पॉइंटर-इवेंट प्रॉपर्टी बनाई गई थी और यह तकनीकी रूप से अन्य HTML तत्वों (अभी तक, wiki.csswg.org/spec/css4-ui#ppter-events ) के लिए W3C स्पेक्स में नहीं है। IE <11 को छोड़कर सभी आधुनिक ब्राउज़र इसका समर्थन करते हैं।

— कैस्पियनरॉच

9

आप बटन कक्षाओं btn-linkऔर btn-xsप्रकार के साथ उपयोग कर सकते हैं submit, जो इसके अंदर एक आइकन के साथ एक छोटा अदृश्य बटन बना देगा। उदाहरण:

<button class="btn btn-link btn-xs" type="submit" name="action" value="delete">
    <i class="fa fa-times text-danger"></i>
</button>

— किरिल
स्रोत

5

इस तरह भी संभव है

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

— मो
स्रोत

1

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

<input type="hidden" id="Clicked" name="Clicked" value="" />
<button type="submit" class="btn btn-success ClickCheck" id="Create"> <i class="fa fa-file-pdf-o"> Create Bill</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="Reset"> <i class="fa fa-times"> Reset</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="StoreData"> <i class="fa fa-archive"> Save</i></button>

JQuery का उपयोग करना:

<script type="text/javascript">
    $(document).ready(function()
    {
        $('.ClickCheck').click(function()
        {
            var ButtonID = $(this).attr('id');
            $('#Clicked').val(ButtonID);
        });
    });
</script>

फिर आप "क्लिक की गई" पोस्ट चर में क्लिक किए गए बटन के मूल्य को पुनः प्राप्त कर सकते हैं

— RationalRabbit
स्रोत

फ़ॉन्ट-भयानक, इनपुट प्रकार 'सबमिट'

एचटीएमएल

सीएसएस

12.1 छद्म तत्वों के पहले और बाद में