Cách đơn giản nhất để thêm biểu tượng vào trang HTML của bạn là sử dụng thư viện biểu tượng (icon), chẳng hạn như Font Awesome.
Thêm tên của biểu tượng mong muốn vào phần tử HTML nội dòng (inline HTML). Như <i> hoặc <span>.
Tất cả các biểu tượng trong các thư
viện biểu tượng này có thể được tùy chỉnh bằng CSS (kích thước, màu sắc, độ bóng, v.v.)
Thư viện Font Awesome
Để sử dụng các biểu tượng của thư viện Font Awesome, hãy truy cập fontawesome.com , đăng nhập và nhận mã để thêm vào phần<head> của trang html của bạn.
Hướng dẫn dành cho người mới bắt đầu này sẽ hướng dẫn bạn một số cách về cách thêm biểu tượng trong HTML – Bao gồm tải xuống mã nguồn mẫu miễn phí.
Bạn đang xem : thêm biểu tượng trong html
Chào mừng bạn đến với hướng dẫn dành cho người mới bắt đầu về cách thêm biểu tượng trong HTML và CSS. Cần thêm một số biểu tượng vào trang web của bạn? Làm cho nội dung dễ điều hướng hơn một chút?
Có nhiều cách khác nhau để thêm biểu tượng trong HTML và CSS:
Cách dễ
nhất là sử dụng ký hiệu HTML , chỉ cần sao chép và dán mã thực thể HTML tương ứng. Ví dụ: & amp; # 9733; đại diện cho biểu tượng ngôi sao.
Tải xuống hình ảnh biểu tượng từ các trang web như FlatIcon và sử dụng chúng như hiện tại. VÍ DỤ. & lt; img src = "ICON.PNG" / & gt;
Sử dụng một tập hợp các biểu tượng phông chữ, chẳng hạn như Webdings. VÍ DỤ. & lt; p style = "font-family: Webdings" & gt; ABC & lt; / p & gt;
Cuối cùng, hãy tải và sử dụng
các thư viện biểu tượng như Font Awesome và Biểu tượng vật liệu .
Nhưng chúng được thực hiện chính xác như thế nào? Hãy để chúng tôi xem qua một số ví dụ trong hướng dẫn này – Đọc tiếp để tìm hiểu!
ⓘ Tôi đã bao gồm một tệp zip với tất cả mã nguồn mẫu ở đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào.
TRANG TRÌNH
BÀY NHANH
TẢI XUỐNG & amp; LƯU Ý
Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa.
LƯU Ý NHANH
Nếu bạn phát hiện ra lỗi, vui lòng bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với toàn bộ thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem
Nếu bạn phát hiện lỗi, vui lòng nhận xét bên dưới. Tôi cũng cố gắng trả lời những câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu
bạn cần câu trả lời khẩn cấp, vui lòng xem danh sách các trang web của tôi để nhận trợ giúp về lập trình
TẢI XUỐNG MÃ VÍ DỤ
Nhấp vào đây để tải xuống mã nguồn, tôi đã phát hành mã nguồn theo giấy phép của MIT, vì vậy hãy thoải mái xây dựng hoặc sử dụng nó trong dự án của riêng bạn.
THÊM BIỂU TƯỢNG
Được rồi, bây giờ chúng ta hãy tìm hiểu các phương pháp khác nhau về
cách thêm biểu tượng trong HTML và CSS.
PHƯƠNG PHÁP 1) BIỂU TƯỢNG HTML
1-html-Symbol.html
& lt; div & gt; & amp; # 9733; SAO! & Lt; / div & gt;
& lt; div & gt; & amp; # 9730; Báo cáo thời tiết. & Lt; / div & gt;
& lt; div & gt; & amp; # 9731; Bạn có muốn xây người tuyết không? & Lt; / div & gt;
& lt; div & gt; & amp; # 9787; Khuôn mặt hạnh phúc. & Lt; / div & gt;
★ SAO!
☂ Báo cáo thời tiết.
☃ Bạn có muốn xây người tuyết không?
☻ Vẻ mặt hạnh phúc.
Đây là loại phép thuật nào? Chà, đây là những biểu tượng HTML, và có rất nhiều thứ trong số này – Mọi thứ từ mũi tên, đến biểu tượng, đến tiền tệ, đến mặt cười và hơn thế nữa. Phần tốt nhất là chúng được đưa thẳng vào HTML gốc và chúng tôi không cần tải
các khuôn khổ của bên thứ ba để các khuôn khổ này hoạt động.
Cách sử dụng rất đơn giản, chỉ cần xác định & amp; #NUMBER; và nó sẽ “dịch” sang ký hiệu HTML tương ứng. Tôi sẽ để lại một liên kết đến tài liệu tham khảo đầy đủ trong phần bổ sung bên dưới. Ngoài ra, các ký hiệu này được coi giống như văn bản, chúng tôi có thể kiểm soát kích thước bằng cách sử dụng font-size , thậm chí áp dụng font-weight và text-decoration trên đó.
PHƯƠNG PHÁP 2) HÌNH ẢNH BIỂU TƯỢNG
2A) BIỂU TƯỢNG
HÌNH ẢNH FLAT
2a-icon-image.html
& lt; img src = "test-icon.png" / & gt; Vì vậy, có thể gọi cho tôi?
Vì vậy, có thể gọi cho tôi?
Vì vậy, có thể gọi cho tôi?
Đây phải là “Thuyền trưởng rõ ràng”, chỉ cần chèn một biểu tượng hình ảnh. Thực hiện tìm kiếm “biểu tượng miễn phí” hoặc “clipart miễn phí”, chúng đều có trên Internet.
2B) CÀI ĐẶT CỬA HÌNH ẢNH
Theo dõi phương pháp biểu tượng hình ảnh ở trên, sẽ không hiệu quả nếu sử dụng một biểu tượng cho mỗi hình ảnh. Đây là cách thông minh hơn khi chúng
tôi kết hợp tất cả các biểu tượng thành một hình ảnh duy nhất, nhưng nó yêu cầu một chút CSS để hoạt động.
2b-icon-set.html
& lt; style & gt;
.ico {
display: inline-block;
chiều rộng: 32px; chiều cao: 30px;
background-image: url ('icon-set.png');
background-repeat: không lặp lại;
}
.ico-screen {background-position: 0 0; }
.ico-phone {background-position: -32px 0; }
.ico-pc {background-position: -64px 0; }
.ico-tablet {background-position: 0 -31px; }
.ico-camera {background-position: -32px -31px; }
& lt; / style & gt;
& lt; i class = "ico ico-screen" & gt; & lt; / i & gt; Màn hình
& lt; i class = "ico ico-phone" & gt; & lt; / i & gt; Điện thoại
& lt; i class = "ico ico-pc" & gt; & lt; / i & gt; máy tính
& lt; i class = "ico ico-tablet" & gt; & lt; / i & gt; Máy tính bảng
& lt; i class = "ico ico-camera" & gt; & lt; / i & gt; Máy ảnh
Đúng vậy. Tất cả những gì chúng tôi đang làm ở đây là sử dụng bộ biểu tượng làm hình nền, sau đó “ánh xạ” chúng bằng cách sử dụng background-position .
Phông chữ thường chứa các bảng chữ cái, nhưng có một số phông chữ thú vị là các bộ biểu tượng thay thế – Tất cả những gì
chúng tôi phải làm là tìm những bộ biểu tượng này, đưa chúng vào bằng cách sử dụng CSS @ font-face < / code>, sau đó sử dụng nó như bình thường.
Tôi sẽ để lại các liên kết đến các trang web có phông chữ miễn phí trong phần bổ sung bên dưới, bạn chỉ cần thực hiện tìm kiếm phông chữ cho “biểu tượng” và sẽ còn nhiều thứ nữa. Nhưng xin lưu ý rằng không phải tất cả các phông chữ đều “miễn phí hoàn toàn”… Một số phông chữ miễn phí cho mục đích sử dụng cá nhân, nhưng không sử dụng cho mục đích thương mại.
PHƯƠNG PHÁP 4) THƯ VIỆN
BIỂU TƯỢNG
4A) FONT TUYỆT VỜI
4a-font-awesome.html
& lt;! - (A) TẢI TỪ CDN - & gt;
& lt;! - https://cdnjs.com/libraries/font-awesome - & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/LATEST-VERSION" & gt;
& lt;! - (B) CÁC BIỂU TƯỢNG ĐỊNH NGHĨA - & gt;
& lt;! - https://fontawesome.com/icons?d=gallery - & gt;
& lt; i class = "fas fa-bath" & gt; & lt; / i & gt; +
& lt; i class = "fas fa-bed" & gt; & lt; / i & gt; =
& lt; i class = "fas fa-pin-full" & gt; & lt; / i & gt;
Font Awesome là một thư viện biểu tượng miễn phí, cách sử dụng khá đơn giản.
Tải thư viện Font Awesome từ CDN. Có rất nhiều phiên bản… Nếu không chắc chắn, chỉ cần tải all.min.css chứa mọi thứ.
Để chèn một biểu tượng, hãy sử dụng thẻ & lt; i & gt; và đặt cho nó một CSS class = "fa fa-ICON" - Kiểm tra
Thư viện phông chữ tuyệt vời để có danh sách đầy đủ các biểu tượng có sẵn.
Tất nhiên, nếu bằng cách nào đó bạn cần nhiều biểu tượng hơn nữa, thì cũng có các gói trả phí trên Font Awesome.
4B) CÁC BIỂU TƯỢNG VẬT LIỆU
4b-mat-icon.html
& lt;! - (A) CÁC BIỂU TƯỢNG VẬT LIỆU TẢI - & gt;
& lt;! - https://google.github.io/material-design-icons/ - & gt;
& lt; link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet" & gt;
& lt;! - (B) SỬ DỤNG BIỂU TƯỢNG - & gt;
& lt;! - https://fonts.google.com/icons - & gt;
& lt; span class = "material-icon" & gt; icecream & lt; / span & gt;
& lt; span class = "material-icon" & gt; nhà hàng & lt; / span & gt;
& lt; span class = "material-icon" & gt; emoji_food_beverage & lt; / span & gt;
& lt; span class = "material-icon" & gt; local_pizza & lt; / span & gt;
Biểu tượng Vật liệu là một tập hợp các biểu tượng miễn phí phổ biến khác mà bạn có thể thấy rất quen thuộc… Bởi vì nó là của Google. Kiểm tra trang của họ
trên Phông chữ Google để biết danh sách đầy đủ các biểu tượng.
NHỮNG LỢI ÍCH HỮU ÍCH & amp; LIÊN KẾT
Đó là tất cả cho hướng dẫn này và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn.
PHƯƠNG PHÁP NÀO LÀ TỐT NHẤT?
Cá nhân tôi thích các ký hiệu HTML hơn khi nói đến các dự án nhỏ, vì nó là tùy chọn nhẹ nhất. Nhưng hãy lưu ý rằng một số ký hiệu sẽ không hiển thị chính
xác trên các trình duyệt cũ hơn, bạn sẽ không muốn sử dụng biểu tượng này nếu vấn đề tương thích ngược.
Hình ảnh là an toàn nhất và sẽ luôn hoạt động, nhưng chúng làm tăng thời gian tải.
Font Awesome và Google Material Icons cũng là những lựa chọn khá an toàn nhưng chúng cũng làm tăng thời gian tải.
Việc tải phông chữ là một việc rất khó hiểu.
LIÊN KẾT & amp; TÀI LIỆU THAM KHẢO
BẢNG CHEAT HÌNH ẢNH
HẾT
Cảm
ơn bạn đã đọc và chúng ta đã đến phần cuối của hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn với dự án của bạn, và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, vui lòng bình luận bên dưới. Chúc may mắn và viết mã vui vẻ!
Xem thêm những thông tin liên quan đến chủ đề thêm biểu tượng trong html
Cách chèn icon vào trang html
Tác giả: Vo Thi Nhu Quynh (FPL HCM)
Ngày đăng: 2021-10-10
Đánh giá: 4 ⭐ ( 5928 lượt đánh giá )
Khớp với kết quả tìm kiếm: link themify: https://themify.me/themify-icons link font awesome: https://fontawesome.com/
Hướng dẫn tạo Menu Icon với HTML và CSS
Tác
giả: freetuts.net
Đánh giá: 3 ⭐ ( 5730 lượt đánh giá )
Khớp với kết quả tìm kiếm: Menu Icon được sử dùng hầu hết trong tất cả các trang web. Nó được sử dụng nhiều để ẩn các danh mục trang web khi ở độ phân giải của smartphone hay tablet,.
Các thực thể biểu tượng HTML
Tác giả: tedu.com.vn
Đánh giá: 5 ⭐ ( 7634 lượt đánh giá )
Khớp với kết quả tìm kiếm: Tìm hiều về các biểu tượng trong HTML
Biểu tượng trong HTML, toán học, chữ cái La mã
Tác giả: thuthuat.taimienphi.vn
Đánh giá: 4 ⭐ ( 8166 lượt đánh giá )
Khớp với kết quả tìm kiếm: Biểu tượng trong HTML, toán học, chữ cái La mã
Các biểu tượng trong HTML
Tác giả: gokisoft.com
Đánh giá: 5 ⭐ ( 3803 lượt đánh giá )
Khớp với kết quả tìm kiếm: HTML Symbols - Các biểu tượng trong HTML
Bài 14: CSS Icons (Thêm biểu tượng vào trang)
Tác giả: timoday.edu.vn
Đánh giá: 3 ⭐ ( 7081 lượt đánh giá )
Khớp với kết quả tìm kiếm: Cách thêm 1 biểu tượng vào trang
html sử dụng CSS
Biểu tượng Website được tạo ra như thế nào?
Tác giả: www.semtek.com.vn
Đánh giá: 5 ⭐ ( 3821 lượt đánh giá )
Khớp với kết quả tìm kiếm: Bạn đang tìm hiểu về biểu tượng website là gì? Biểu tượng website có ý nghĩa như thế nào đối với website? CÙNG SEMTEK TÌM HIỂU NGAY NHÉ!
Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình
