Giới thiệu
Năm 2019 vừa rồi có tương đối nhiều thư viện Icon rất được quan tâm và sẽ liên tục được ưa dùng năm 2020 bản thân xin đề cập ra một số thư viện Icon hay nhé
Thư viện Icon
1.Potlab Icons
2.Flight Icon
3.Motion Icons
4.Line Awesome
Bạn đang xem: Thư viện icon html
Lời kết
Vừa rồi mình đã share 4 thư viện Icon được dùng thịnh hành trong năm 2019 và mình suy nghĩ năm 2020 nó vẫn sẽ thường xuyên được thực hiện với thính thuận tiện và dễ dùng cùng thư viện phong phú phong phú Icon. Cảm ơn các bạn đã phát âm bài.
frontend icon
All rights reserved
báo cáo cung cấp series của tớ
Mục lục
không có mục lục
test thách khuyến nghị
links
Hãy đăng ký một thông tin tài khoản Viblo để cảm nhận nhiều bài viết thú vị hơn.
Đăng nhập Đăng kí
Trong thi công website họ có nhu cầu sử dụng rất nhiều các Web phông Icon nhằm website thêm phần tấp nập như các icon email, icon phone, icon times v.v…
Nổi tiếng với thông dụng nhất hoàn toàn có thể kể mang đến là thư viện font Awesome, đó là thư viện với trên 700 icon font bao hàm cả miễn giá tiền và trả phí. Hình như còn tương đối nhiều các thư viện khác ví như Bootstrap, Fontello, Glyph
Search v.v… phần nhiều các icon thông dụng mà bạn phải đều miễn chi phí và có thể tìm thấy trong số bộ tủ sách này.Chúng ta cùng tò mò qua Web phông Icon là gì và điểm mạnh của nó nhé.
Xem thêm: Top 10 địa điểm tự học ở thư viện đại học, những lí do nên học ở thư viện
Trước phía trên khi chưa xuất hiện web fonts nếu bọn họ muốn chèn 1 icon bé dại vào website bọn họ sẽ cần chèn vào icon đó như một hình ảnh, ngôi trường hợp họ muốn bao gồm hiệu ứng như để bình thường thì color xanh, di con chuột vào thay đổi thành màu đỏ thì họ bắt buộc phải gồm 2 hình ảnh, 1 màu xanh da trời và 1 color đỏ, trường hợp chúng ta có 10 icon khác nhau cần đổi màu thì chúng ta sẽ cần tổng số 20 hình ảnh khác nhau, mỗi một khi hiển thị, website sẽ cần phải kết nối đôi mươi lần để có thể tải về hết trăng tròn hình này, mà họ đã biết, kết nối càng các thì website sẽ càng chậm.Để giải quyết và xử lý vấn đề này thì một kỹ thuật hotline là CSS Image Sprites ra đời, ý tưởng đó là đưa tất cả các icon cần sử dụng vào một hình ảnh duy nhất, từng icon vào hình hình ảnh này sẽ tiến hành xác định phụ thuộc vào tọa độ và kích cỡ để hiển thị đúng đắn trên website.
Kỹ thuật này có ưu thế là chỉ việc load 1 hình hình ảnh là áp dụng được cho tất cả icon, yếu điểm là kích thước các hình hình ảnh phải đúng chuẩn tuyệt đối, vẫn đề xuất tổng đôi mươi hình hình ảnh cho những icon và việc đổi khác kích thước hình hình ảnh gặp nhiều trở ngại do phụ thuộc độ sắc nét của hình ảnh.Với sự cung cấp của các trình chu đáo và chuẩn chỉnh CSS3 ta rất có thể tạo những icon bên dưới dạng Symbol Font có nghĩa là các icon cũng đều có thuộc tính cơ phiên bản của ký tự là fonts Size, màu sắc v.v… những icon này lưu trữ dưới dạng vector do vậy khi kích cỡ icon lớn hay bé dại đều hiển thị sắc nét. Các icon dạng này được gọi là Web fonts Icon.Để sinh sản được các icon font, đầu tiên họ phải xây đắp các icon này dưới dạng vector, rất có thể dùng Corel hoặc Illustrator để xây đắp và lưu tệp tin dưới định hình .svg.Nếu có thời hạn ta rất có thể làm toàn bộ các icon mà chúng ta muốn, trên thực tế một số trong những website đã cung cấp miễn phí những công vậy và icon cơ bạn dạng để sử dụng, bọn họ chỉ yêu cầu tạo những icon mà không có miễn phí hoặc những icon đặc biệt chỉ họ cần cần sử dụng như icon logo công ty hay icon avatar riêng rẽ hoặc dễ dàng thay vị phải thực hiện 1 cỗ font mặc định cả trăm icon tuy thế không cần sử dụng hết chúng ta chỉ mong muốn tạo cỗ fontbao có một sốicon cơ mà ta đề xuất sử dụng.Chúng ta có thể làm hết hầu hết thứ một cách bằng tay thủ công nhưng để tiết kiệm ngân sách và chi phí thời gian chúng ta sẽ thực hiện công thế mà Fontello cung cấp để chế tạo ra Web Font cấp tốc hơn.Bước 1: Vào trang web http://fontello.com
Cách thực hiện hết sức dễ dàng kéo từ trên xuống dưới để thấy icon nào mong sử dụng, cần áp dụng cái như thế nào thì click vào icon đó, một vòng tròn phủ quanh icon xuất hiện nghĩa là icon này đã được sử dụng, muốn bỏ icon không áp dụng nữa thì click thêm 1 lần vào icon lúc đó vòng tròn sẽ trở nên mất.
Để thêm 1 iconriêngvào bộ font thì kéo thả file kiến tạo SVG vào mục Customer Icon khi ấy icon sẽ xuất hiện trong mục này. Lưu ý: các file thiết kế phải là các đường tức tốc nét (Compound Path)
Bước 2: Sau đi đang chọn xong các icon, dìm nút download webfont để cài đặt về bộ web font trong số đó bao gồm:+ thư mục css: đựng file .css để include vào website+ thư mục font: chứa những file giành riêng cho font bao hàm .eot, .svg, .ttf, .woff, .woff2Bước 3: copy tổng thể các khoáng sản trên vào thư mục chứa website của người sử dụng và include file .css vào website.Tại địa chỉ cần sử dụng icon chèn vào code sau: Ví dụ: trong những số đó ten-icon đem theo bảng sau:
