Các biểu tượng có thể là một bổ sung tuyệt vời cho biểu mẫu HTML của bạn. Chúng không chỉ làm cho biểu mẫu của bạn trông đẹp mắt mà còn giúp tránh những lỗi của người dùng. Con người có thể nhận dạng hình ảnh [chẳng hạn như phong bì] nhanh hơn nhiều so với việc họ có thể đọc các từ [như "Email"]
Để thêm biểu tượng vào biểu mẫu của bạn, bạn cần hiểu cách thực hiện 2 điều
- Nối hoặc thêm các addon vào các trường biểu mẫu của bạn
- Thêm biểu tượng vào addons bằng phông chữ biểu tượng
Addon trường biểu mẫu
Một trường biểu mẫu Bootstrap điển hình trông như thế này
Email
Chúng tôi có thể thêm hoặc nối thêm văn bản hoặc HTML vào trường bằng cách gói đầu vào bằng một ____11_______
và sau đó bao gồm một .input-group-addon
với
. So, to prepend the earlier field with an @ would look like this:
Email
@
Nếu chúng ta thêm .input-group-addon
sau , thì văn bản được thêm vào
.
Bạn có thể áp dụng CSS cho lớp .input-group-addon
để thay đổi màu phông chữ và màu nền của addon của bạn. Đây là một minh họa đơn giản.
Dễ lắm phải không?
.
Thêm biểu tượng vào Addons của bạn
Cách dễ nhất để thêm các biểu tượng vào trang của bạn là sử dụng các biểu tượng dựa trên phông chữ. Bootstrap hỗ trợ vượt trội. Họ trông giống như thế này
Để sử dụng các biểu tượng này, bạn phải
- Đảm bảo rằng các tệp phông chữ sẽ được đặt trong thư mục
3, liên quan đến các tệp CSS đã biên dịch. Bootstrap mong đợi điều nàyEmail
@
- Tạo một phần tử HTML [e. g.
] mà bạn muốn chứa biểu tượng của mình
- Thêm
5 vào phần tử HTML mà bạn muốn chứa một biểu tượngEmail
@
- Thêm một lớp chỉ định biểu tượng mà bạn sẽ sử dụng [e. g
6]Email
@
Vì vậy, để thêm đầu vào email của chúng tôi bằng đầu vào Glyphicon sẽ yêu cầu HTML sau
Email
Đằng sau hậu trường, Bootstrap CSS thay thế nội dung của bằng ký tự trong phông chữ tương ứng với phong bì để tạo ra kết quả sau
Để có nhiều biểu tượng hơn [được cung cấp theo giấy phép MIT miễn phí], bạn có thể xem xét thư viện yêu thích của cá nhân tôi. phông chữ tuyệt vời. Đây là những gì các biểu tượng trông giống như
Phông chữ Tuyệt vời hoạt động giống như Glyphicon với một vài điều chỉnh. Đây là cách sử dụng nó
- Nhúng Phông chữ Tuyệt vời trên trang web của bạn bằng CDN. Điều này là cần thiết vì không giống như Glyphicon, Font Awesome không phải là một phần của Bootstrap CSS.
- Tạo phần tử
để chứa biểu tượng của bạn [đây là quy ước về Phông chữ tuyệt vời]
- Thêm
9 vào phần tửEmail
@
- Thêm một lớp chỉ định biểu tượng mà bạn sẽ sử dụng [e. g
1]
Sử dụng Font Awesome, chúng ta có thể tạo một addon phong bì với HTML này
Email
Một cách dễ dàng hơn. Trình tạo biểu mẫu
Thật dễ dàng để tạo các addon và biểu tượng, nhưng nó có thể nhanh chóng trở nên tẻ nhạt nếu bạn đang tạo các biểu mẫu có độ dài bất kỳ. May mắn thay, bạn có thể sử dụng Trình tạo biểu mẫu Bootstrap của chúng tôi để tạo các add-on và thêm các Biểu tượng tuyệt vời về phông chữ vào các trường của bạn. Dưới đây là những gì bạn cần làm