Trang chủ -> Kiến thức

Tạo biểu tượng trên website với Icon font face

Cập nhật lúc: 14/05/2013 08:06 pm

Icon (biểu tượng) là một phần không thể thiếu của một website hiện đại. Dù chỉ là tiểu tiết, nhưng nó đóng vai trò quan trọng trong thiết kế web. Tuy nhiên, bài viết dưới đây mình trình bày không nhấn mạnh về thiết kế mà chú trọng đến yếu tố kỹ thuật.

Thông thường khi muốn chèn một icon (biểu tượng) vào website, chúng ta có 2 cách:

Cách 1: Tạo thẻ <img>, rồi trỏ đến link icon đó.

1.<img src="/Đường dẫn img" />

Cách 2: Dùng thẻ <span> và <i>

1.<span class="icon"></span>

Cách 3: Sử dụng font-face, kết hợp với file dạng font và css để tạo ra các thẻ icon.

    Ưu điểm
  • - Dễ dàng thao tác, bạn chỉnh kích thước tự do, phóng to cực đại, thu nhỏ cực tiểu.
  • - Chỉnh màu sắc tuỳ thích, kết hợp luôn cả hiệu ứng Gradient CSS3.
  • - Những icon thường áp dụng vào phong cách thiết kế web flat design (Thiết kế phẳng)
  • - Kích thước nhẹ so với việc chèn icon dạng hình ảnh.
    Nhược điểm
  • - Số lượng icon không nhiều, nhiều icon đẹp nhưng bắt trả phí rất cao.
  • - Không hấp dẫn bằng những icon dạng hình ảnh, vì màu sắc thường đơn điệu.

Dưới đây sẽ là 5 bộ icon miễn phí nhưng không kém phần hấp dẫn. Mỗi set icon đều được thiết kế tỉ mỉ, cẩn thận. Bao gồm những icon thường dùng trong web, các icon về mạng xã hội, thời tiết v.v...

Về cách áp dụng vào website, các bạn có thể xem phần hướng dẫn của từng bộ icon. Nói chung là cách áp dụng vào website cũng na ná, tương tự nhau.

Genericons

Tạo biểu tượng trên website với Icon font-face

Meteocons

Tạo biểu tượng trên website với Icon font-face

Foundation Icon Fonts 2!

Tạo biểu tượng trên website với Icon font-face

Pictonic

Tạo biểu tượng trên website với Icon font-face

tenbytwenty

Tạo biểu tượng trên website với Icon font-face



<<< Nhấn vào đây để đăng ký thiết kế trực tuyến >>>


 

Khi Đăng Ký Dịch Vụ Thiết Kế Quý Khách Sẽ Được:

1.    Ý tưởng thiết kế mới, độc đáo, phù hợp với mọi yêu cầu của Quý khách.
2.    Tư vấn chuyên nghiệp về màu sắc phù hợp với từng cá nhân, môi trường kinh doanh.
3.    Tư vấn chất liệu sử dụng.
4.    Tư vấn về ý tưởng tạo hình layout, thiết kế.
5.    Được xem demo và duyệt file thiết kế.
6.    Đáp ứng tiến độ, thời gian yêu cầu.
7.    Giá thành cạnh tranh, tốt nhất.

Liện hệ chúng tôi để nhận báo giá chi phí tốt nhất.



Tags:

 

DỊCH VỤ SÁNG TẠO

HỖ TRỢ TRỰC TUYẾN

QUẢNG CÁO