Tải miễn phí mọi thứ có trên website: [CSS bài 16] Giới thiệu về icon trong CSS

Chủ Nhật, 3 tháng 9, 2017

Bài này thuộc phần 16 của 16 trong series Học CSS cơ bản

1. Cách thêm icon (biểu tượng) trong CSS

Cách đơn giản nhất để thêm icon (biểu tượng) trong CSS vào trang HTML là với một thư viện icon (biểu tượng), chẳng hạn như Font Awesome.

Thêm biểu tượng vào bất kỳ phần tử HTML nào bằng cách sử dụng thẻ <i> hoặc <span>.

Tất cả các biểu tượng trong thư viện biểu tượng có thể được tùy chỉnh bằng CSS (kích thước, màu sắc, bóng đổ …)

Có 03 thư viện biểu tượng (icon) bạn cần biết là:

+ Font Awesome Icon
+ Bootstrap Icon
+ Google Icon

Lưu ý: KHÔNG cần cài đặt hay tải về khi sử dụng các thư viện icon trên vào trang web.

Để dùng Font Awesome Icon ta thêm vào thẻ <head> của HTML trang như sau:

<link rel=”stylesheet” href=”http://ift.tt/2iVnDMK;

Để biết thêm về cách dùng bạn vào trang web http://ift.tt/1isfm6i

Để tìm biểu tượng (icon) bạn thích bạn vào trang web http://ift.tt/1fwd8q5

Để dùng Bootstrap glyphicon ta thêm vào thẻ <head> của HTML trang như sau:

<link rel=”stylesheet” href=”http://ift.tt/2ewmfLP;

Để dùng Google icon ta thêm vào thẻ <head> của HTML trang như sau:

<link rel=”stylesheet” href=”http://ift.tt/2ewCpEF;

Đến đây là kết thúc bài viết ngắn giới thiệu về icon trong CSS. Ở bài sau tôi sẽ viết về các trạng thái liên kết và cách tạo nút liên kết trong CSS.

from WordPress http://ift.tt/2iTg2OS
via IFTTT