Sử dụng image-icon như một font-icon
CSS
43
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.
199 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
24 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 hơn 4 năm trước
24 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 hơn 4 năm trước
21 8
White
19 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 gần 3 năm trước
19 9
Bài viết liên quan
White
19 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 gần 4 năm trước
19 10
White
4 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 6 tháng trước
4 0
White
2 8
Như các anh em có thể biết hoặc chưa biết thì Atomic CSS ( hay có một cái tên thân mật khác là Functional CSS ) đã tràn lan ở khắp mọi nơi, thậm ch...
Hùng Phạm viết 4 tháng trước
2 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
34 bài viết.
199 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á!