Bài 11: Sử dụng icon Font awesome

1 4.662

Trong bài này, mình sẽ hướng dẫn sử dụng icon font awesome.

Video Sử dụng icon Font awesome

Hướng dẫn chi tiết

Ưu điểm

+ Ưu điểm đầu tiên là Font Awesome có phiên bản free với tương đối đầy đủ các icon

+ Dễ dàng cài đặt

Cách dùng font awesome

+ Vào trang chủ font awesome

+ Tải về

+ Giải nén.

+ Cài đặt đường dẫn <link> trong file CSS

+ Vào lại trang chủ để tìm icon cần dùng

+ Dùng bằng thẻ bất kỳ, giới thiệu thẻ mới <i class=”theo định dạng của font awesome”><i>

+ Tăng kích thước bằng font-size

Các thuộc tính đã hướng dẫn

+ float: left (right) dồn các khối

"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO

Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".

+ overflow: hidden

+ display: block

+ margin và padding

+ border : viền, 1px (độ dày) black (màu) solid (loại nét)

+ text-align : canh lề

+ font-size : kích thước.

+ font-weight : bold độ đậm nhạt, giống như thẻ <b></b>

+ font-family : kiểu chữ

+ font-style: italic : tạo chữ in nghiêng

+ float : left, dồn sang một bên

+ text-decoration: none, underline.

+ line-height: 20px: độ giãn dòng.

+ color: (màu chữ) dùng green, red hay mã màu

+ background-color: (màu nền)black

+ background-image: url(imgage source).

Code mẫu: download

Nếu có thắc mắc, đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Đừng quên LikeShare nếu thấy bài viết thú vị.

Liên hệ

Bạn cũng có thể thích
  1. lac lac nói

    ad ơi e dùng font của google. và e đặt một font và một text trong một thẻ div.. ý là để cho nó cùng một dòng ấy ạ.. nhưng mà cái font và text nó k thể nằm ngang nhau đc .mong ad giúp

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.