VietNetwork.Vn

Bạn có muốn thêm phông chữ biểu tượng vào trang web WordPress của mình không?

Phông chữ biểu tượng cho phép bạn thêm các biểu tượng vectơ có thể thay đổi kích thước được tải giống như phông chữ web để chúng không làm chậm trang web của bạn. Bạn thậm chí có thể tạo kiểu cho chúng bằng CSS để có được giao diện chính xác mà bạn muốn.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm phông chữ biểu tượng vào giao diện WordPress của bạn.

Phông chữ biểu tượng là gì và tại sao bạn nên sử dụng chúng?

Phông chữ biểu tượng chứa các biểu tượng hoặc hình ảnh nhỏ thay vì chữ cái và số.

Bạn có thể sử dụng các phông chữ biểu tượng này để hiển thị các hình ảnh phổ biến. Ví dụ: bạn có thể sử dụng chúng với giỏ hàng, nút tải xuống, hộp tính năng, cuộc thi tặng quà và thậm chí trong menu điều hướng WordPress.


Hầu hết khách truy cập sẽ hiểu ngay ý nghĩa của một biểu tượng thường được sử dụng. Bằng cách này, bạn có thể giúp khách truy cập tìm đường trên trang web của bạn và tương tác với nội dung của bạn.

Những hình ảnh này cũng có thể giúp bạn tạo một trang web WordPress đa ngôn ngữ, vì hầu hết mọi người có thể hiểu phông chữ biểu tượng cho dù họ nói ngôn ngữ nào.

So với các biểu tượng dựa trên hình ảnh, các biểu tượng phông chữ tải nhanh hơn nhiều để chúng có thể tăng tốc độ và hiệu suất của WordPress.

Có một số bộ phông chữ biểu tượng nguồn mở mà bạn có thể sử dụng miễn phí, chẳng hạn như IcoMoon, Genericons và Linearicons.

Trên thực tế, phần mềm WordPress đi kèm với các biểu tượng dashicon miễn phí được tích hợp sẵn. Đây là những biểu tượng bạn có thể thấy trong khu vực quản trị WordPress.


Trong hướng dẫn này, chúng tôi sẽ sử dụng Font Awesome vì đây là bộ biểu tượng mã nguồn mở phổ biến nhất. Chúng tôi sử dụng nó trên trang web   Đăng nhập để xem liên kết và trong tất cả các plugin WordPress cao cấp của chúng tôi.

Như đã nói, hãy xem cách bạn có thể dễ dàng thêm phông chữ biểu tượng trong giao diện WordPress của mình. Chỉ cần sử dụng các liên kết nhanh để chuyển thẳng đến phương pháp mà bạn muốn sử dụng.

Phương pháp 1. Thêm Phông chữ Biểu tượng bằng Plugin WordPress (Dễ dàng)

Cách dễ nhất để thêm phông chữ biểu tượng vào WordPress là sử dụng plugin Font Awesome. Điều này cho phép bạn sử dụng phông chữ biểu tượng trong các trang và bài đăng của mình mà không cần sửa đổi các tệp giao diện. Bạn cũng sẽ tự động nhận được bất kỳ biểu tượng Font Awesome mới nào mỗi khi bạn cập nhật plugin.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Font Awesome. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.

Sau khi kích hoạt, bạn có thể thêm biểu tượng Phông chữ tuyệt vời vào bất kỳ khối mã ngắn nào. Chỉ cần mở trang hoặc bài đăng mà bạn muốn hiển thị phông chữ biểu tượng, sau đó nhấp vào biểu tượng '+'.

Bây giờ bạn có thể tìm kiếm 'Shortcode' và chọn đúng khối khi nó xuất hiện.


Khi đã xong, bạn có thể thêm bất kỳ biểu tượng Phông chữ tuyệt vời nào bằng cách sử dụng mã ngắn sau:
   
[icon name="rocket"]
Chỉ cần thay "tên lửa" bằng tên của biểu tượng mà bạn muốn hiển thị. Để có tên này, hãy truy cập trang Font Awesome và nhấp vào biểu tượng mà bạn muốn sử dụng.


Trong cửa sổ bật lên xuất hiện, hãy tiếp tục và nhấp vào tên của biểu tượng.

Giờ đây, Phông chữ Tuyệt vời sẽ tự động sao chép tên vào khay nhớ tạm của bạn.


Khi đã xong, chỉ cần dán tên vào mã ngắn. Giờ đây, bạn có thể nhấp vào 'Xuất bản' hoặc 'Cập nhật' để làm cho phông chữ biểu tượng hoạt động.

Đôi khi bạn có thể muốn hiển thị một phông chữ biểu tượng bên trong một khối văn bản. Ví dụ: bạn có thể cần hiển thị biểu tượng 'bản quyền' sau tên thương hiệu.

Để thực hiện việc này, chỉ cần dán mã ngắn vào bất kỳ khối Đoạn văn nào.


Sau đó, bạn có thể sử dụng cài đặt trong menu bên phải để tùy chỉnh biểu tượng, tương tự như cách bạn tùy chỉnh các tùy chọn cho khối văn bản. Ví dụ: bạn có thể thay đổi kích thước phông chữ.

WordPress sẽ biến mã ngắn thành biểu tượng Phông chữ tuyệt vời cho khách truy cập và hiển thị nó cùng với văn bản của bạn.


Một tùy chọn khác là thêm mã ngắn vào bất kỳ khu vực sẵn sàng cho widget nào.

Ví dụ: bạn có thể thêm khối Shortcode vào thanh bên hoặc phần tương tự trên trang web của mình.


Để biết thêm thông tin, vui lòng xem hướng dẫn của chúng tôi về cách sử dụng mã ngắn trong tiện ích thanh bên WordPress của bạn.

Bạn thậm chí có thể thêm mã ngắn biểu tượng vào các cột và tạo các hộp tính năng đẹp mắt.


Để biết hướng dẫn chi tiết, hãy xem hướng dẫn của chúng tôi về cách thêm các hộp tính năng có biểu tượng trong WordPress.

Nhiều trang web sử dụng phông chữ biểu tượng trong menu của họ để giúp khách truy cập tìm đường. Để thêm một biểu tượng, hãy tạo một menu mới hoặc mở một menu hiện có trong bảng điều khiển WordPress.

Để biết hướng dẫn từng bước, hãy xem hướng dẫn dành cho người mới bắt đầu của chúng tôi về cách thêm menu điều hướng trong WordPress.

Sau đó, nhấp vào 'Tùy chọn màn hình' và chọn hộp bên cạnh 'Lớp CSS'.


Khi đã xong, chỉ cần nhấp để mở rộng mục menu nơi bạn muốn hiển thị biểu tượng.

Bây giờ bạn sẽ thấy trường 'Lớp CSS' mới.


Để có được lớp CSS của một biểu tượng, chỉ cần tìm phông chữ biểu tượng trên trang web Font Awesome và nhấp vào nó. Nếu muốn, bạn có thể thay đổi kiểu của biểu tượng bằng cách nhấp vào các cài đặt khác nhau.

Trong cửa sổ bật lên, bạn sẽ thấy một đoạn mã HTML. Lớp CSS chỉ đơn giản là văn bản nằm giữa dấu ngoặc kép. Ví dụ: trong hình ảnh sau, lớp CSS là fa-solid fa-address-book.


Chỉ cần sao chép văn bản bên trong dấu ngoặc kép, sau đó quay lại bảng điều khiển WordPress.

Bây giờ bạn có thể dán văn bản vào trường 'Lớp CSS'.


Để thêm nhiều phông chữ biểu tượng hơn, chỉ cần làm theo quy trình tương tự được mô tả ở trên.

Khi bạn hài lòng với cách thiết lập menu, hãy nhấp vào 'Lưu'. Bây giờ nếu bạn truy cập trang web WordPress của mình, bạn sẽ thấy menu điều hướng được cập nhật.


Phương pháp 2. Sử dụng Phông chữ Biểu tượng với SeedProd (Tùy chỉnh thêm)

Nếu bạn muốn tự do hơn về nơi bạn sử dụng các biểu tượng phông chữ, thì chúng tôi khuyên bạn nên sử dụng plugin trình tạo trang.

SeedProd là  trình tạo trang WordPress kéo và thả tốt nhất trên thị trường và có hơn 1400 biểu tượng Phông chữ Tuyệt vời được tích hợp sẵn. Nó cũng có một hộp Biểu tượng được tạo sẵn mà bạn có thể thêm vào bất kỳ trang nào bằng cách kéo và thả.

Với SeedProd, thật dễ dàng để  tạo các trang tùy chỉnh trong WordPress  và sau đó hiển thị các biểu tượng Font Awesome ở bất kỳ đâu trên các trang đó.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin. Để biết thêm chi tiết, hãy xem hướng dẫn dành cho người mới bắt đầu của chúng tôi về  cách cài đặt plugin WordPress.

Lưu ý: Có  phiên bản SeedProd miễn phí nhưng chúng tôi sẽ sử dụng phiên bản Pro vì phiên bản này đi kèm với hộp Biểu tượng.

Sau khi kích hoạt, hãy truy cập  SeedProd »Cài đặt  và nhập khóa cấp phép của bạn.


Bạn có thể tìm thấy thông tin này trong  tài khoản của mình  trên trang web SeedProd. Sau khi nhập khóa cấp phép, hãy tiếp tục và nhấp vào nút 'Xác minh khóa'.

Tiếp theo, bạn cần truy cập  SeedProd » Pages  và nhấp vào nút 'Add New Landing Page'.


Bây giờ, bạn có thể chọn một mẫu để sử dụng làm cơ sở cho trang của mình. SeedProd có hơn 180 mẫu được thiết kế chuyên nghiệp mà bạn có thể tùy chỉnh theo nhu cầu của trang web hoặc blog WordPress của mình.

Để chọn một mẫu, hãy di chuột qua mẫu đó rồi nhấp vào biểu tượng 'Dấu kiểm'.


Chúng tôi đang sử dụng mẫu 'Trang bán sách điện tử' trong tất cả các hình ảnh của mình, nhưng bạn có thể sử dụng bất kỳ thiết kế nào bạn muốn.

Tiếp theo, hãy tiếp tục và nhập tên cho trang tùy chỉnh. SeedProd sẽ tự động tạo một URL dựa trên tiêu đề của trang, nhưng bạn có thể thay đổi URL này thành bất kỳ thứ gì bạn muốn.

Khi bạn hài lòng với thông tin bạn đã nhập, hãy nhấp vào nút 'Lưu và Bắt đầu Chỉnh sửa Trang'.


Tiếp theo, bạn sẽ được đưa đến trình tạo trang kéo và thả SeedProd, nơi bạn có thể tùy chỉnh mẫu.

Trình chỉnh sửa SeedProd hiển thị bản xem trước trực tiếp thiết kế của bạn ở bên phải và một số cài đặt khối ở bên trái.


Menu bên trái cũng có các khối mà bạn có thể kéo vào thiết kế của mình.

Bạn có thể kéo và thả các khối tiêu chuẩn như nút và hình ảnh hoặc sử dụng các khối nâng cao như biểu mẫu liên hệ, bộ đếm ngược, nút chia sẻ trên mạng xã hội, v.v.


Để tùy chỉnh bất kỳ khối nào, chỉ cần nhấp để chọn khối đó trong bố cục của bạn.

Menu bên trái giờ sẽ hiển thị tất cả các cài đặt bạn có thể sử dụng để tùy chỉnh khối đó. Ví dụ: bạn có thể thường xuyên thay đổi màu nền, thêm hình nền hoặc thay đổi  cách phối màu  và phông chữ để phù hợp hơn với thương hiệu của mình.


Để thêm một phông chữ biểu tượng vào trang, chỉ cần tìm khối 'Biểu tượng' ở cột bên trái rồi kéo nó vào bố cục của bạn.

SeedProd sẽ hiển thị biểu tượng 'mũi tên' theo mặc định.


Thay vào đó, để hiển thị một biểu tượng Font Awesome khác, chỉ cần nhấp để chọn khối Biểu tượng.

Trong menu bên trái, hãy di chuột qua biểu tượng rồi nhấp vào nút 'Thư viện biểu tượng' khi nó xuất hiện.


Bây giờ, bạn sẽ thấy tất cả các biểu tượng Phông chữ tuyệt vời khác nhau mà bạn có thể chọn.

Chỉ cần tìm biểu tượng phông chữ mà bạn muốn sử dụng và nhấp vào nó.


SeedProd bây giờ sẽ thêm biểu tượng vào bố cục của bạn.

Sau khi chọn một biểu tượng, bạn có thể thay đổi căn chỉnh, màu sắc và kích thước của biểu tượng đó bằng cách sử dụng cài đặt trong menu bên trái.


Bạn có thể tiếp tục làm việc trên trang bằng cách thêm nhiều khối hơn và tùy chỉnh các khối đó trong menu bên trái.

Khi bạn hài lòng với giao diện của trang, hãy nhấp vào nút 'Lưu'. Sau đó, bạn có thể chọn 'Xuất bản' để làm cho trang đó hoạt động.


Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm phông chữ biểu tượng trong giao diện WordPress của mình. Bạn cũng có thể xem qua hướng dẫn của chúng tôi về các plugin bật lên tốt nhất được so sánh và cách chọn phần mềm thiết kế web tốt nhất.