Sử dụng image-icon như một font-icon
CSS
32
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

33 bài viết.
165 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
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 3 năm trước
21 8
White
18 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 3 năm trước
18 21
White
18 7
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 1 năm trước
18 7
Bài viết liên quan
White
16 9
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 2 năm trước
16 9
White
6 3
Sau đây là cách để tạo một square div và canh giữa theo chiều dọc bằng css. Đây là cách làm rất hay, hỗ trợ được những browser đời cũ như IE8 mà ko...
Toan Nguyen viết hơn 2 năm trước
6 3
White
12 0
Giới thiệu cơ bản về Styled components 1. Styled components là gì? 1.1. Phương pháp css truyền thống Trước khi nói về styled components chúng ta...
danhuynhdev viết 7 tháng trước
12 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


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