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 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!

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.

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 đề.

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.

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.

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.

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.

Khi xem trước hoặc đăng lên, nó sẽ như thế này:

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:

<i class="fab fa-wordpress"></i>

Sau đó, đặt nó trong trình chỉnh sửa bài đăng WordPress trên HTML block như thế này:

Bản xem trước sẽ như thế này:

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:

Bản xem trước:

Hãy nhớ rằng để chuyển đến một icon, chúng ta sử dụng <i>, và sử dụng <span> để 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:

<i class=”style_prefix fa-icon name></i>

hoặc

<span=”style_prefix fa-icon_name></span>

Đây là cheat sheet của lệnh trên:

<i class="fas fa-icon_name"></i>

<span class="fas fa-icon_name"></span>

<i class="far fa-icon_name"></i>

<span class="far fa-icon_name"></span>

<i class="fal fa-icon_name"></i>

<span class="far fa-icon_name"></span>

<i class="fab fa-icon_name"></i>

<span class="far fa-icon_name"></span>

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.

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:

Khi bạn nhấp vào “Xem trước”, bạn sẽ thấy icon:

Để 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.