4 cách dễ dàng để thêm biểu tượng trong HTML CSS (Ví dụ đơn giản) – cách thay đổi biểu tượng html của trang web

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 : cách thay đổi biểu tượng trang web 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:

  1. 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.
  2. 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;
  3. 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;
  4. Cuối cùng, hãy tải và sử dụng các thư viện biểu tượng như Font Awesome 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

MỤC LỤC

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.

Xem Thêm  Làm cách nào để luôn hiển thị thanh cuộn bằng CSS? - css luôn hiển thị thanh cuộn

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 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 được không?  

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 PHÁP 3) BỘ FONT BIỂU TƯỢNG

3-icon-font.html

  & lt; style & gt;
@mặt chữ {
  font-family: Heydings;
  src: url (heydings_icons.ttf);
}
.biểu tượng {
  cỡ chữ: 3em;
  font-family: Heydings;
}
& lt; / style & gt;
& lt; p class = "icon" & gt; ABCDEF & lt; / p & gt;  

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 vấn đề 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ủ đề cách thay đổi biểu tượng html của trang web

How to Edit HTML in a WordPress Theme

  • Tác giả: Envato Tuts+
  • Ngày đăng: 2021-11-20
  • Đánh giá: 4 ⭐ ( 2572 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Learn how to edit HTML in WordPress so you can modify themes with whatever customizations you like. ► Download unlimited WordPress themes, plugins & more: https://elements.envato.com/wordpress?utm_campaign=yt_tutsplus_elV0Bb19MfM&utm_medium=referral&utm_source=youtube.com&utm_content=description

    You might be setting out to make some changes to a theme for the first time, and you might also know that you need to learn how to edit HTML code in WordPress.

    However, the first hurdle you may run into is that if you’re looking for the .html files that hold that code, you’re not going to find any in a WordPress theme.

    That’s because in a WordPress theme, all the HTML is contained within .php files instead. In this video, you'll discover a few ways to edit these .php files to edit your site's HTML.

    Read more on How to Edit HTML in a WordPress Theme on Envato Tuts+: https://webdesign.tutsplus.com/tutorials/how-to-edit-html-in-a-wordpress-theme--cms-36615?utm_campaign=yt_tutsplus_elV0Bb19MfM&utm_medium=referral&utm_source=youtube.com&utm_content=description

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Envato Tuts+
    Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com?utm_campaign=yt_tutsplus_elV0Bb19MfM&utm_medium=referral&utm_source=youtube.com&utm_content=description

    Envato Elements
    All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
    ► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com?utm_campaign=yt_tutsplus_elV0Bb19MfM&utm_medium=referral&utm_source=youtube.com&utm_content=description

    ► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
    ► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
    ► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Hướng dẫn thêm logo và biểu tượng site cho website

  • Tác giả: atpweb.vn
  • Đánh giá: 3 ⭐ ( 3572 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Logo và biểu tượng site là những thứ tối thiểu và cơ bản của một website, sau đây ATPWEB xin hướng dẫn bạn cách thêm logo và biểu tượng site, hay còn gọi là

Hướng dẫn cách chỉnh sửa code của web một cách tiện lợi và mới nhất 2020

  • Tác giả: internetmarketing.vn
  • Đánh giá: 5 ⭐ ( 4520 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khi bạn sử dụng trình soạn thảo web nhưng vẫn chưa có giao diện và nội dung như mình mong muốn, vậy làm sao để cải thiện vấn để này một cách nhanh chóng và tiện lợi . Hôm nay internetmarketing.vn sẽ hướng dẫn bạn cách chỉnh sửa code của web để có thể tạo được một trang web ưng ý nhất.

Cách thay đổi icon (favicon) và Logo của trang web

  • Tác giả: h.myy.vn
  • Đánh giá: 3 ⭐ ( 8199 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn này dành cho Admin của trang web sử dụng mã nguồn do Mỹ ý / ITUSA phát triển. Hình bên dưới là icon, và logo của trang web

Thay đổi logo và biểu tượng site trên website wordpress

  • Tác giả: webthanhhoa.net
  • Đánh giá: 3 ⭐ ( 8526 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thay đổi logo trên website wordpress vô cùng đơn giản và dễ dàng chỉ với 5 bước sau đây, mời bạn đọc cùng Web Thanh Hoá tìm hiểu nhé

Bài 14: CSS Icons (Thêm biểu tượng vào trang)

  • Tác giả: timoday.edu.vn
  • Đánh giá: 3 ⭐ ( 3294 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

Làm thế nào để thêm favicon vào website

  • Tác giả: www.hostinger.vn
  • Đánh giá: 4 ⭐ ( 8954 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mỗi website trên mạng có logo độc nhất và trong nhiều trường hợp, chúng đều được dùng làm favicon

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