ฉันได้สิ่งนี้เพื่อการทำงาน แต่มีข้อควรระวังเล็กน้อยที่ฉันยังไม่ได้รับการแก้ไข
อย่างไรก็ตามนี่เป็นวิธีที่ทำได้:
ใช้ปุ่มอินพุตเฉลี่ยของคุณ:
<input type="submit" class="btn btn-success" value="Save">
ตัดไอคอนที่คุณต้องการสำหรับปุ่มส่งของคุณออกจากไฟล์ sprite glyphicons ตรวจสอบให้แน่ใจว่าเป็นภาพขนาด 14x14 พิกเซล ใช่ในสถานการณ์ที่เหมาะสมคุณสามารถนำสไปรต์กลับมาใช้ใหม่ได้และหากใครก็ตามที่คิดว่าออกมาฉันยินดีที่จะได้ยินว่ามันเสร็จสิ้นแล้ว :-)
เมื่อคุณทำเช่นนั้นคุณสามารถเขียน CSS สำหรับปุ่มอินพุตของคุณเช่นนี้:
input[type='submit'] {
background-image: url('../images/submit-icon.png'), #62C462; /* fallback color if gradients are not supported */
background-image: url('../images/submit-icon.png'), -webkit-linear-gradient(top, #62C462, #51A351);
background-image: url('../images/submit-icon.png'), -moz-linear-gradient(top, #62C462, #51A351); /* For Fx 3.6 to Fx 15 */
background-image: url('../images/submit-icon.png'), -ms-linear-gradient(top, #62C462, #51A351); /* For IE 10 Platform Previews and Consumer Preview */
background-image: url('../images/submit-icon.png'), -o-linear-gradient(top, #62C462, #51A351); /* For Opera 11.1 to 12.0 */
background-image: url('../images/submit-icon.png'), linear-gradient(top, #62C462, #51A351); /* Standard syntax; must be the last statement */
background-repeat: no-repeat;
background-position: 5px 50%, 0cm 0cm;
padding-left: 25px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
input[type='submit']:hover {
background-image: url('../images/submit-icon.png'), #51A351; /* fallback color if gradients are not supported */
background-image: url('../images/submit-icon.png'), -webkit-linear-gradient(top, #51A351, #51A351);
background-image: url('../images/submit-icon.png'), -moz-linear-gradient(top, #51A351, #51A351); /* For Fx 3.6 to Fx 15 */
background-image: url('../images/submit-icon.png'), -ms-linear-gradient(top, #51A351, #51A351); /* For IE 10 Platform Previews and Consumer Preview */
background-image: url('../images/submit-icon.png'), -o-linear-gradient(top, #51A351, #51A351); /* For Opera 11.1 to 12.0 */
background-image: url('../images/submit-icon.png'), linear-gradient(top, #51A351, #51A351); /* Standard syntax; must be the last statement */
background-position: 5px 50%, 0cm 0cm;
padding-left: 25px;
}
ใช้งานได้ใน Firefox 14, Chrome 21
ไม่ทำงานใน IE 9
tl; dr: ด้วย css เพียงเล็กน้อยคุณสามารถวางไอคอนลงบนปุ่มส่งได้โดยอัตโนมัติ แต่คุณต้องวางไอคอนไว้ในไฟล์แยกต่างหากและมันจะไม่ทำงานใน Internet Explorer