ดูเหมือนจะไม่มีคลาสสำหรับประเภทการป้อนข้อมูล 'ส่ง' ในฟอนต์ที่ยอดเยี่ยม เป็นไปได้ไหมที่จะใช้บางคลาสจากฟอนท์ยอดเยี่ยมสำหรับการป้อนปุ่ม? ฉันได้เพิ่มไอคอนให้กับปุ่มทั้งหมด (ซึ่งเชื่อมโยงกับคลาส 'btn' จาก twitter-bootstrap) ในแอปพลิเคชันของฉัน แต่ไม่สามารถเพิ่มไอคอนใน 'ประเภทอินพุตส่ง'

หรือวิธีใช้รหัสนี้:

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

HTML:

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

(ซึ่งฉันได้รับจากHTML: จะสร้างปุ่มส่งพร้อมข้อความ + รูปภาพได้อย่างไร ) ด้วยตัวอักษรที่ยอดเยี่ยม?

ใช้ปุ่มชนิด = "ส่ง" แทนการป้อนข้อมูล

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

สำหรับการใช้ Font Awesome 3.2.0

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

HTML

เนื่องจาก<input>องค์ประกอบแสดงค่าของคุณลักษณะค่าเท่านั้นเราจึงต้องจัดการเท่านั้น:

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

ฉันกำลังใช้เอนทิตีที่นี่ซึ่งสอดคล้องกับ U + F043 สัญลักษณ์ 'tint' ของ Font Awesome

CSS

จากนั้นเราต้องจัดรูปแบบให้ใช้แบบอักษร:

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

ซึ่งจะให้สัญลักษณ์สีอ่อนใน Font Awesome และข้อความอื่น ๆ ในแบบอักษรที่เหมาะสม

อย่างไรก็ตามการควบคุมนี้จะไม่สมบูรณ์แบบพิกเซลดังนั้นคุณอาจต้องปรับแต่งมันด้วยตัวเอง

คุณสามารถใช้แบบฟอร์มตัวอักษรที่ยอดเยี่ยม

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

นี่คือลิงค์สำหรับ cheatsheet http://fortawesome.github.io/Font-Awesome/cheatsheet/

ในทางเทคนิคแล้วมันเป็นไปไม่ได้ที่จะได้รับ:beforeและ:afterองค์ประกอบหลอกทำงานกับinputองค์ประกอบ

จากW3C :

12.1 The: before and: after pseudo-elements

ผู้เขียนระบุสไตล์และที่ตั้งของเนื้อหาที่สร้างด้วย: before และ: after pseudo-elements ตามที่ชื่อระบุไว้: ก่อนและ: หลังจากองค์ประกอบแบบหลอกระบุตำแหน่งของเนื้อหาก่อนและหลังเนื้อหาต้นไม้เอกสารขององค์ประกอบ คุณสมบัติ 'เนื้อหา' ร่วมกับองค์ประกอบหลอกเหล่านี้ระบุสิ่งที่ถูกแทรก

ดังนั้นฉันจึงมีโครงการที่ฉันส่งปุ่มในรูปแบบของinputแท็กและด้วยเหตุผลบางอย่างที่ผู้พัฒนารายอื่น จำกัด ให้ฉันใช้<button>แท็กแทนปุ่มส่งอินพุตปกติดังนั้นฉันจึงหาวิธีแก้ปัญหาอื่นโดยห่อหุ้มปุ่มไว้ในspanชุด เพื่อposition: relative;แล้ววางตำแหน่งไอคอนอย่างแน่นอนโดยใช้:afterหลอก

หมายเหตุ: ซอฟเดดเดิ้ลใช้รหัสเนื้อหาสำหรับ FontAwesome 3.2.1 ดังนั้นคุณอาจจำเป็นต้องเปลี่ยนค่าของcontentคุณสมบัติตามนั้น

HTML

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

CSS

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จะบังคับให้การกระทำการคลิกผ่านเนื้อหานั้น .

จากMozilla Developer Network :

นอกเหนือจากการระบุว่าองค์ประกอบนั้นไม่ใช่เป้าหมายของเหตุการณ์เมาส์ค่าที่ไม่สั่งให้เหตุการณ์เมาส์จะ "ผ่าน" องค์ประกอบและกำหนดเป้าหมายสิ่งที่ "ใต้" องค์ประกอบนั้นแทน

เลื่อนตัวอักษร / ไอคอนหัวใจDemoและดูว่าจะเกิดอะไรขึ้นหากคุณไม่ได้ใช้pointer-events: none;

คุณสามารถใช้คลาสของปุ่ม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>

เป็นไปได้เช่นนี้

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

ด้วยการส่งหลายครั้งเมื่อคุณต้องการค่าของการส่งที่เลือกคุณสามารถทำได้อย่างง่ายดาย เพียงแค่สร้างฟิลด์ที่ซ่อนอยู่ในแบบฟอร์มของคุณและเปลี่ยนค่าของมันขึ้นอยู่กับว่าคลิกปุ่มใด ตัวอย่างเช่นในแบบฟอร์มสมมติว่าคุณมี:

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

จากนั้นคุณสามารถเรียกคืนค่าของปุ่มที่คลิกในตัวแปรโพสต์ "คลิก"