Cách upload WordPress icon: Hướng dẫn cho người mới bắt đầu
WordPress icon fonts là phần quan trọng của mỗi trang WordPress. Nó bổ sung vào giao diện responsive của việc thiết kế trang web.
Bạn đã chú ý đến tất cả icons trên trang web của chúng tôi chưa? Một trong số các icons đó là icon trang chủ trên thanh điều hướng.
Nếu bạn muốn thêm icons như thế vào trang web của riêng mình – hãy ngồi xuống và thư giãn, chúng tôi sẽ dạy bạn cách làm thật chính xác.
Tại sao dùng icons?
Icon WordPress miễn phí
Cách dùng WordPress icon nhanh nhất
Tóm lại
Tại sao dùng icons?
Icon fonts là kiểu chữ chứa ký hiệu và chữ tượng hình, thay vì chữ cái và ký hiệu thông thường. Nó được sử dụng để hiển thị icons thường dùng – các ảnh nhỏ. Tìm hiểu sâu hơn nhé.
Ví dụ về icon fonts có ở hầu hết trang web hoặc blog, chính là nút mạng xã hội. Khi bạn chia sẻ gì đó từ trang web vào tài khoản Facebook, bạn nhấp vào icon font Facebook!
Social Media Icon Fonts trên bài blog post của Hostinger
Trước khi icon font xuất hiện, tất cả icon và họa tiết trên web đều là hình ảnh. Vì hình ảnh không thể giãn rộng và tương thích được nên làm chậm thời gian tải trang và khiến một số đối tượng không thể truy cập. Vì thế icon font được chọn thay thế để chạy trên mọi màn hình, và nhẹ hơn nhiều!
Icon font là hình ảnh vector nên có thể giãn rộng vô hạn.
Icon font có tính năng tuyệt vời là tương thích với thiết kế vì bạn có thể dễ dàng thao tác chúng theo nhu cầu. Có nhiều tùy chọn tùy chỉnh – thay đổi kích thước và màu sắc icon, xoay, thêm hiệu ứng và nhiều nữa. Tất cả đều có thể được thực hiện đơn giản thông qua CSS mà không làm giảm chất lượng hình ảnh.
WordPress Icon font đơn giản và tương đối dễ thực hiện. Hơn nữa, chúng cũng cho phép lưu trữ nhiều biểu tượng bên trong một file, giúp làm giảm số lượng yêu cầu HTTP.
Mặc dù có nhiều tùy chọn thêm biểu tượng khác, icon font vẫn được sử dụng rộng rãi vì bạn có thể dễ dàng tìm thấy chúng miễn phí hoặc thậm chí tự thiết kế riêng để sử dụng trên trang web.
Icon WordPress miễn phí
Có một số nguồn icon fonts miễn phí có sẵn cho WordPress. Bạn chỉ cần lướt tìm “icon font” trên Google. IcoFont, Font Awesome, We Love Icon Fonts, và IcoMoon là những nền tảng được khuyên dùng nhiều nhất.
trang chủ của IcoFont
IcoFont là một trong những nguồn icon fonts miễn phí lớn nhất, cung cấp hơn 2100 icons WordPress trong một phông chữ được sắp thành 30 loại. Nó cũng cho phép bạn tạo gói icon tùy chỉnh riêng.
Bạn có thể tải icons từ trang IcoFont xuống – bằng cách sao chép mã HTML hoặc nhấp vào nút tải xuống từ điều hướng trang web.
Lướt các icons mà bạn đã chọn, thêm vào bộ sưu tập và tải xuống. Sau khi tải xuống, bạn sẽ nhận được file zip gồm CSS, ví dụ và phông chữ. Đoạn mã HTML của icons đã tải xuống được ghép nối với Unicode của chúng trong thư mục ví dụ.
Nếu muốn sử dụng trực tiếp trên web, bạn có thể sao chép toàn bộ thư mục IcoFont vào thư mục dự án của bạn. Hãy đảm bảo bạn dẫn vị trí đến icofont.min.css trong tiêu đề.
trang chủ của Font Awesome site
Một nguồn icon fonts được dùng rộng rãi nữa là Font Awesome, cung cấp hơn 1500 icons miễn phí và hơn 5000 icons phiên bản pro bao gồm hơn 70 loại icons với bốn kiểu chính – solid, regular, light, brands.
trang chủ của We Love Icon Fonts
We Love Icon Fonts là nguồn khác cho phép bạn tạo icons cho riêng mình với sự trợ giúp của người tạo phông. Bạn chỉ cần nhấp “Add” và nhận mã nhúng dùng để tùy chỉnh bộ sưu tập thông qua CSS.
trang chủ của IcoMoon
Cuối cùng nhưng không kém phần quan trọng, IcoMoon cung cấp hơn 5.500 icons vector miễn phí và hơn 4.000 icons cao cấp. Bạn có thể tạo phông chữ IcoMoon cho riêng mình và tải lên file SVG bằng tính năng import.
Cách dùng WordPress icon nhanh nhất
Bạn có thể sử dụng icon fonts thủ công trên trang WordPress bằng cách sao chép mã nhúng hoặc sử dụng các tùy chọn thay thế. Bất kể vấn đề hiệu suất, sử dụng plugins và Dashicons tích hợp là cách nhanh và dễ nhất để sử dụng icon WordPress.
Sử dụng Plugin
Sử dụng plugin là cách dễ nhất để thêm icon font vào trang WordPress mà không cần sửa code.
plugin Font Awesome Integration
Trước tiên, bạn phải cài đặt và kích hoạt miễn phí plugin Font Awesome Integration plugin. Sau khi hoàn tất cài đặt và kích hoạt, bạn có thể bắt đầu thêm icons font bằng shortcode – [fawesome]. Hãy đi sâu vào chi tiết.
Có bốn thuộc tính trong shortcode:
target – mục tiêu của thẻ ‘a’
href – link dùng trong thẻ ‘a’
iclass – các lớp dùng trong thẻ /i/
aclass – các lớp dùng trong thẻ ‘a’
Hãy tạo icon dẫn đến trang WordPress.
Ở đây, chúng ta sẽ đặt code của icon – (fa-wordpres) – vào thẻ iclass và link http://wordpress.com/ vào thẻ ahref:
[fawesome iclass=”fab fa-wordpress” ahref=”https://wordpress.com”] Lưu ý trong ví dụ này, chúng tôi thêm tiền tố fab vào iclass. Chúng tôi sẽ bao gồm các tiền tố theo kiểu sau đó, bằng cách cung cấp cho bạn cheat sheet.Đây là giao diện trên WordPress shortcode block.
HTML snippet của WordPress Icon từ Font Awesom được tạo lại trên site WordPress chính
Khi xem trước hoặc đăng lên, nó sẽ như thế này:
WordPress icon hiển thị và liên kết đến wordpress.com
Khi nhấp vào icon WordPress, bạn sẽ được chuyển đến trang được liên kết.
Bạn cũng có thể truy cập trực tiếp vào thư mục Font Awesome icons và kiểm tra code của icon bạn muốn dùng. Để làm được, nhấp vào icon và copy-paste vào phần dự định nội dung trang web.
Lấy ví dụ về việc sử dụng icon WordPress miễn phí có sẵn trên Font Awesome và đặt trên bài đăng WordPress.
Đầu tiên, chỉ cần sao chép code icon WordPress đã chọn từ Font Awesome:
Sau đó, đặt nó trong trình chỉnh sửa bài đăng WordPress trên HTML block như thế này:
HTML snippet của WordPress icon trong editor
Bản xem trước sẽ như thế này:
xem trước wordpress icon
Ngoài ví dụ trên, bạn vẫn có thể tùy chỉnh theo yêu cầu dự án bằng việc xác định các yếu tố bằng cách thủ công – màu sắc, kích thước, v.v.
Đây là ví dụ về code để sửa đổi màu sắc và kích thước của icon:
Tùy chỉnh kích cở và màu của icon bằng HTML snippets
Bản xem trước:
Xem trước WordPress icon tùy chỉnh từ Font Awesome
Hãy nhớ rằng để chuyển đến một icon, chúng ta sử dụng , và sử dụng để bắt đầu lệnh. Ngoài ra, mỗi tên icon có một tiền tố theo kiểu.
Đây là cách đặt lệnh:
hoặc
Đây là cheat sheet của lệnh trên:
Phong cách Loại
Style Prefix Ví dụ
Solid Free fas
Regular Pro far
Light Pro fal
Brands Free fab
Sử dụng Dashicons
Dù có các icon fonts nguồn mở có sẵn khác trên internet, WordPress đã có Dashicons – gói icon font mặc định tích hợp cho mọi trang WordPress, được giới thiệu trong WordPress 3.8.
Dashicons cung cấp các icons font, từ menu admin, màn hình chào, định dạng bài đăng, phương tiện, chỉnh sửa hình ảnh, TinyMCE, màn hình bài đăng, sắp xếp, mạng xã hội, sản phẩm, phân loại, widgets, thông báo, WordPress.org specific, và nhiều hơn nữa.
Các biểu tượng này có thể được sử dụng để tùy chỉnh plugins, themes, icons theo loại bài đăng và các yếu tố khác trên trang web. Vì được trang bị trên WordPress nên nó rất dễ sử dụng!
Bạn có thể làm được bằng cách thêm code vào file functions.php, và sẽ tốn thời gian nếu thực hiện thủ công.
Code Snippets plugin
Thay vì vậy, bạn chỉ cần sử dụng plugin miễn phí như Code Snippets để cấu hình Dashicons mà không phải cấu hình file functions.php.
Cùng với đó, bạn có thể truy cập Dashicons website và chọn trang bạn muốn sử dụng. Để tích hợp nó trên trang web, bạn có thể nhấp vào link “Sao chép HTML” và nhận code – chỉ cần sao chép và dán code vào element WordPress.
Ví dụ, lấy icon dashicons-tickets từ thư mục Dashicons và thêm vào bài đăng WordPress. Sao chép HTML và đặt vào HTML block như thế này:
Dashicons’ HTML snippet của WordPress ticket icon trên post editor
Khi bạn nhấp vào “Xem trước”, bạn sẽ thấy icon:
xem trước WordPress ticket icon từ Dashicons
Để tùy chỉnh thêm Dashicons, bạn có thể sử dụng CSS.
Tóm lại
Như bạn có thể thấy, icon WordPress là sự thay thế tuyệt vời để thay thế hình ảnh được sử dụng làm WordPress icon, chữ tượng hình hoặc biểu tượng cho trang web. Icon font là yếu tố tuyệt vời cho trang web tương thích vì có thể giảm thời gian tải do kích thước icon nhỏ hơn.
Bạn cũng dễ có được icon fonts trên internet vì có rất nhiều icons miễn phí.
Một số nguồn đề xuất cho Icon WordPress là:
IcoFont
Font Awesome
We Love Icon Fonts
IcoMoon
Thay vì thêm icon fonts thủ công, bạn có thể sử dụng cách nhanh và dễ nhất để thêm chúng:
Sử dụng plugin Font Awesome Intergration
Sử dụng Dashicons WordPress tích hợp với plugins Code Snippets
Tất cả bạn cần làm là sao chép và dán code HTML của icons mà bạn muốn sử dụng trong lĩnh vực mục tiêu của trang web.
