Dường như không có lớp nào cho kiểu nhập 'gửi' trong phông chữ tuyệt vời. Có thể sử dụng một số lớp từ phông chữ tuyệt vời cho đầu vào nút? Tôi đã thêm các biểu tượng cho tất cả các nút (thực sự liên kết với lớp 'btn' từ twitter-bootstrap) trong các ứng dụng của tôi, nhưng không thể thêm biểu tượng vào 'gửi kiểu nhập'.

Hoặc, làm thế nào để sử dụng mã này:

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>

(mà tôi đã lấy từ HTML: Làm cách nào để tạo nút gửi với văn bản + hình ảnh trong đó? ) với phông chữ tuyệt vời?

sử dụng loại nút = "gửi" thay vì đầu vào

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

để sử dụng Font Awesome 3.2.0

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

HTML

Do <input>phần tử chỉ hiển thị giá trị của thuộc tính value, nên chúng ta chỉ thao tác với nó:

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

Tôi đang sử dụng thực thể ở đây, tương ứng với U + F043, biểu tượng 'tint' của Font Awesome.

CSS

Sau đó, chúng ta phải tạo kiểu cho nó để sử dụng phông chữ:

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

Điều này sẽ cung cấp cho chúng tôi biểu tượng màu trong Phông chữ Tuyệt vời và văn bản khác trong phông chữ thích hợp.

Tuy nhiên, điều khiển này sẽ không hoàn hảo về pixel, do đó bạn có thể phải tự điều chỉnh nó.

Bạn có thể sử dụng phông chữ utf tuyệt vời

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

đây là đường dẫn cho chiếc áo choàng http://fortawgie.github.io/Font-Aw đũa / áo

Chà, về mặt kỹ thuật thì không thể có được :beforevà :aftercác phần tử giả hoạt động trên inputcác phần tử

Từ W3C :

12.1 The: trước và: sau các phần tử giả

Các tác giả chỉ định kiểu và vị trí của nội dung được tạo bằng: trước và sau các phần tử giả. Như tên của chúng chỉ ra, các phần tử giả trước: sau và sau xác định vị trí của nội dung trước và sau nội dung của cây tài liệu. Thuộc tính 'nội dung', kết hợp với các phần tử giả này, chỉ định nội dung được chèn.

Vì vậy, tôi đã có một dự án nơi tôi đã gửi các nút ở dạng input thẻ và vì một số lý do, các nhà phát triển khác đã hạn chế tôi sử dụng <button>các thẻ thay vì các nút gửi đầu vào thông thường, vì vậy tôi đã đưa ra một giải pháp khác, đó là bọc các nút bên trong một spanbộ đến position: relative;và sau đó hoàn toàn định vị biểu tượng bằng :aftergiả.

Lưu ý: Fiddle demo sử dụng mã nội dung cho FontAwgie 3.2.1, do đó bạn có thể cần thay đổi giá trị của thuộc contenttính cho phù hợp.

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

Bây giờ ở đây mọi thứ đều tự giải thích ở đây, về một tài sản tức là pointer-events: none; , tôi đã sử dụng điều đó bởi vì khi di chuột qua :afternội dung giả tạo, nút của bạn sẽ không nhấp, do đó, sử dụng giá trị nonesẽ buộc hành động nhấp đi qua nội dung đó .

Từ Mạng lưới nhà phát triển Mozilla :

Ngoài việc chỉ ra rằng phần tử không phải là mục tiêu của các sự kiện chuột, giá trị không hướng dẫn sự kiện chuột đi qua "phần tử" và nhắm mục tiêu bất cứ điều gì là "bên dưới" phần tử đó.

Di chuột vào phông chữ / biểu tượng trái tim Demovà xem điều gì sẽ xảy ra nếu bạn KHÔNG sử dụngpointer-events: none;

Bạn có thể sử dụng các lớp nút btn-linkvà btn-xsvới loại submit, sẽ tạo một nút nhỏ vô hình với một biểu tượng bên trong nó. Thí dụ:

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

Cũng có thể như thế này

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

Với nhiều lần gửi, khi bạn cần giá trị của lần gửi được chọn, việc này có thể được thực hiện khá dễ dàng. Chỉ cần tạo một trường ẩn trong biểu mẫu của bạn và thay đổi giá trị của nó tùy thuộc vào nút nào được nhấp. Ví dụ: trong biểu mẫu, giả sử bạn có:

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

Sử dụng jQuery:

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

Sau đó, bạn có thể truy xuất giá trị của nút được nhấp trong biến bài "Đã nhấp"