Sử dụng image-icon như một font-icon
CSS
50
White

My Mai viết ngày 02/04/2016

Rất đơn giản nếu khách hàng giao cho bạn 1 file psd trong đó có các item chứa những icon thì mình nghĩ chắc hẳn là các bạn sẽ cắt các icon đó ra và sẽ ghét tất cả lại trong 1 file image và dùng kỹ thuật load css sprite để load từng icon khi sử dụng.

Cũng khá là đơn giản nếu tất cả các icon cùng một size. Nhưng nếu 1 icon có nhiều size và n icon với n size, hay màu sắc thay đổi thì thế nào? Cắt n lầnghép n lần vào file image ư??? Làm thế này thì vi diệu quá( theo mình nghĩ :v)

alt text

Sẽ đơn giản hơn rất nhiều nếu bạn sử dụng font icomoon

Vào site https://icomoon.io làm theo hướng dẫn trong hình
Bước 1
alt text

Bước 2
alt text

Bước 3
Ở bước này cần convert image-icon sang file svg nhé Đầy là site mình thường dùng để convert http://image.online-convert.com/convert-to-svg
alt text

Bước 4
alt text

Bước 5
alt text

Bước 6 Sử dụng đoạn code này để áp dụng vào CSS của bạn nhé
alt text

Bước 7
alt text

Xong rồi nha khá là đơn giản :v
chúc may mắn hêh ^_^

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

My Mai

34 bài viết.
209 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
25 21
Bạn muốn load 3 image khác nhau (Ý mình ở đây là dùng tag không phải background nhé) cho 3 loại màn hình khác nhau (small, medium, large). Bạn sẽ l...
My Mai viết gần 6 năm trước
25 21
White
21 8
Lotus là gì? (Link) là một Ruby Web Framework mới với chú trọng vào cấu trúc tách rời với thiết kế đơn giản và dễ hiểu. Hiện tại thì Lotus vừa re...
My Mai viết gần 6 năm trước
21 8
White
20 9
Tham gia cộng đồng Thoáng đó cũng đã 2 năm từ lúc tớ tham gia cộng đồng Ruby Việt Nam. Giờ ngồi ngẫm lại được gì và mất gì :v Thật thì chẳng mất...
My Mai viết hơn 4 năm trước
20 9
Bài viết liên quan
White
1 2
Lời tựa Frontend nói chung và CSS nói riêng vẫn đang được phát triển liên tục. Ngoài những kiến thức cơ bản, bạn cũng nên cập nhật những kĩ thuật/...
luongvanphuc viết 9 tháng trước
1 2
White
20 10
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết hơn 5 năm trước
20 10
White
5 0
Trước khi bắt đầu viết tiếp phần 2, các anh em có thể xem lại Phần 1 của mình theo đường dẫn bên dưới: (Link) Hoặc là có thể xem bài viết full cả...
Hùng Phạm viết 2 năm trước
5 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
34 bài viết.
209 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!