Hướng dẫn tạo icon font bằng file svg từ ảnh bitmap có sẵn

Chào mọi người

Xin chia sẽ ít kinh nghiệm làm giao diện của mình, khi xưa làm giao diện cho app(mình làm app đa nền tảng nên có dùng html nha) chỉ nhận được file psd nên mình cắt icon bằng ảnh bitmap chạy vô nhiều dòng điện thoại nó bể kinh lắm.

Nên tìm hiểu cách làm icon font cho nó đẹp nó chuyên nghiệp tí. Cũng tìm được vài trang như : fontawesome.io... vô lấy về xài thoải mái nha.

Nhưng khổ nỗi mỗi dự án mỗi bộ icon "không giống ai" nên cách tốt nhất là dùng bộ icon của riêng mình tạo ra . Nhưng làm sao cho nhanh...


Cách mình là như vầy


Để có được bộ icon font thì trước tiên mình phải có được bộ svg của những icon đó cái đã, sau đó lên : icomoon.io(nhanh gọn lẹ) ... đưa lên mấy file svg để nó tạo ra icon font cho mình tải về xài


Bước 1: tạo file svg từ ảnh bitmap có sẵn, tham khảo ở đây nha: http://forum.vietdesigner.net/threads/tao-icon-font-bang-file-svg-tu-anh-bitmap-co-san.110393/

Bước 2: lên trang icomoon.io chọn add icon -> làm theo hình





Bước 3: Chọn mũi tên select -> chọn vào những icon mình muốn tải về -> chọn tap "Generate font" -> chọn download



Bước 4: File tải về có tên icomoon.zip chúng ta giải nén ra và mở trang demo.html lên để xem và biết cách sử dụng nhé



Và giờ thì ứng dụng của bạn chạy trên dòng diện thoại có độ phân giải màng hình cao cách mấy thì icon cũng rất sắc nét nhé

Mọi người có thắc mắc gì thì inbox mình sẽ nói rõ
Cám ơn mọi người đã xem