Hướng dẫn add icon to html - thêm biểu tượng vào html
|
Icon không chỉ giúp biểu đặt cảm xúc rõ ràng khi nhắn tin mà còn giúp cho trang Web trở nên sinh động hơn, tạo thiện cảm cho người xem. Trong lập trình Web, các lập trình viên cũng thường chèn icon vào trang Web để trang trí. Cách nhanh nhất để chèn đó là tận dụng các thư viện icon. Trong phần , chúng ta sẽ khai báo liên kết với thư viện và sau đó chèn icon vào bất kỳ phần tử nào trong phần . Thư viện mà mình hay dùng đó là Font Awesome, Bootstrap Icon, Google Icon. Icon trong các thư viện này rất đa dạng, phong phú, hình ảnh khá bắt mắt với nhiều chủng loại, kích thước, màu sắc khác nhau. không chỉ giúp biểu đặt cảm xúc rõ ràng khi nhắn tin mà còn giúp cho trang Web trở nên sinh động hơn, tạo thiện cảm cho người xem. Trong lập trình Web, các lập trình viên cũng thường chèn icon vào trang Web để trang trí. Cách nhanh nhất để chèn đó là tận dụng các thư viện icon. Trong phần , chúng ta sẽ khai báo liên kết với thư viện và sau đó chèn icon vào bất kỳ phần tử nào trong phần . Thư viện mà mình hay dùng đó là Font Awesome, Bootstrap Icon, Google Icon. Icon trong các thư viện này rất đa dạng, phong phú, hình ảnh khá bắt mắt với nhiều chủng loại, kích thước, màu sắc khác nhau. Show Để chèn được icon vào trang web thì trong phần , bạn cần thêm dòng sau: , bạn cần thêm dòng sau: 1. Chèn icon của Font AwesomeVí dụ:
Kết quả: 2. Chèn icon của BootstrapVí dụ: Kết quả: 2. Chèn icon của BootstrapVí dụ: cloud favorite attachment computer traffic
 2. Chèn icon của Bootstrap: Việc chèn icon rất đơn giản, chỉ cần khai báo thư viện là xong, không cần phải tải hay cài đặt gì cả. Cách làm thì đơn giản nhưng lại khiến cho trang web trở nên sinh động hơn rất nhiều, gây thiện cảm cho người hơn rất nhiều. WELCOME TO EZLASSO.COM Website chia sẽ những thông tin về thủ thuật máy tính, công nghệ. Nếu bạn có thắc mắc về máy tính - công nghệ hãy tìm trên google theo cú pháp: Từ Khoá + Ez LassoTừ Khoá + Ez Lasso Chèn Icon vào website thường bạn hãy sử dụng các hình ảnh dưới chế độ không nền theo định dạng PNG điều này khiến website rất nặng vì thế hôm nay mình sẽ hướng dẫn bạn một cách chèn Icon vào website bằng Font Awesome. Đẹp mà đơn giản không cần thực hiện nhiều thao tác còn nhẹ website Chèn Icon bằng cách nào cho nhẹThay vì sử dụng các hình ảnh không nền để làm các icon cho đẹp website thì giờ đây bạn không cần phải thực hiện như vậy nữa. Vì đã có một cách khác không chiếm 1kb của website của bạn bằng Font ICon. Đây là giải pháp tối ưu nhất về tốc độ load website và thực hiện nhanh chóng không cần cắt ghép hình Font Icon – Font Awesome thường được gọi là Font Icon đây là một ký tự mẫu được gợi là Icon bạn sẽ gặp những font này trong MS Office. Vậy làm sao để chèn Icon bằng font Awesome? Hãy cùng xem tiếp phần sau đây nhé. Hướng dẫn cài đặt Font Awesome trên websiteĐể có thể chèn được Icon vào website thì bạn cần phải thực hiện một số thao tác sau đây: Bước 1: Chén Code thư viện của Font AwesomeỞ bước này bạn phải xác định website bạn đang chạy mã nguồn nào? WordPress hay mã nguồn khác? Mã nguồn WordPress:Đối với mã nguồn wordpress bạn chỉ việc tải Plugin Font Awesome tại đây là có thể sử dụng được. Nếu bạn chưa biết cài plugin trên wordpress thì bạn hãy xem bài viết này nhé. Cài đặt Plugin wordpress như thế nào? Cực dễ cho người mới bắt đầuCài đặt Plugin wordpress như thế nào? Cực dễ cho người mới bắt đầu Mã nguồn khác:Đối với mã nguồn khác bạn hãy thêm đoạn code gọi thư việc Font Awesome sau đây vào trước thẻ đóng Nếu bạn chưa biết cài plugin trên wordpress thì bạn hãy xem bài viết này nhé. Cài đặt Plugin wordpress như thế nào? Cực dễ cho người mới bắt đầu Lưu ý: Đối với mã nguồn wordpress bạn không muốn dùng plugin nữa thì cũng có thể thêm đoạn code gọi thư viện vào trước thẻ đóng nhé. Đối với mã nguồn wordpress bạn không muốn dùng plugin nữa thì cũng có thể thêm đoạn code gọi thư viện vào trước thẻ đóng nhé. Bước 2: Tìm kiếm Icon trên website Font AwesomeTiếp theo bạn hãy truy cập vào website https://fontawesome.io Ở đây bạn hãy truy cập vào tab Icon nhé. Ở đây có 2 dạng Icon dành riêng cho người dùng:
Dựa vào kinh phí của bạn mà hãy sử dụng nhé. Đối với mình Free là đã có thể dùng được rồi. Bạn hãy tích vào mục tag Free trước. Tiếp tới bạn hãy tìm từ khoá mà icon bạn muốn chèn lên website vào ô Search 7,865 icon for…. Sau khi điền xong bạn sẽ nhận được 1 list icon bạn hãy lựa chọn icon ưng ý và click vào nó nhé. Bây giờ website sẽ load ra icon này bạn hãy chọn Start Using This Icon Bạn sẽ nhận được 1 popup hiện lên bạn hãy copy dòng code HTML để chèn vào website. Bước 3: Hướng dẫn chèn Icon vào website.Trước tiên bạn hãy Lưu ý: Đây là Font icon chỉ nhận được trên ngôn ngữ HTML. Nên bạn sử dụng wordpress hay trình soạn thảo nào bạn hãy chuyển qua dạng soạn thảo là HTML Đối với wordpress phiên bản mới, ở trình soạn thảo:Bạn hãy viết nội dung chung dòng với icon được chèn vào và chọn icon 3 chấm => Edit as HTML Bây giờ dòng này sẽ chuyển sang dạng Code html. Bạn hãy tìm tới vị trí cần gán icon này và dán mã được copy ở bước 2 vô đây nhé. Sau đó bạn hãy update và xem kết quả
Đối với phần Widgets (block text):Bạn hãy chọn mục text trên phần mở rộng và copy dán code này để để hiển thị icon ra ngoài nhé. Bạn nên viết nội dung trước và chọn mục text hãy copy vào nhé. Sau khi làm xong bạn hãy chọn Saved nhé. Đối với những mã nguồn khácBạn hãy chuyển sang dạng HTML và dán code vô là Icon đã hiện lên rồi nhé. Trên đây là phần hướng dẫn bạn chèn Icon vào website bằng Font Awesome được Ez Lasso hướng dẫn cho các bạn. Hy vọng bài viết này đã giúp bạn có được những Icon đẹp nhất trên website nhé. Chúc các bạn thành côngEz Lasso hướng dẫn cho các bạn. Hy vọng bài viết này đã giúp bạn có được những Icon đẹp nhất trên website nhé. Chúc các bạn thành công |
