Thêm icon vào menu WordPress với Font Awesome

Thêm icon vào menu WordPress với Font Awesome

Để làm đẹp cho blog WordPress có rất nhiều cách và trong đó bạn có thể thêm icon vào menu WordPress để thêm phần chuyên nghiệp. Trong bài này mình sẽ giới thiệu cho bạn cách sử dụng Font Awesome với rất nhiều icon cho bạn chọn lựa và cách làm cũng vô cùng đơn giản.

Font Awesome là một thành phần trong Bootstrap Framework giúp bạn thêm các icon vào website bằng font chữ.

Tích hợp Font Awesome vào WordPress

Đa số theme hiện nay đều đã tích hợp Font Awesome nhưng nếu theme bạn đang sử dụng không có thì sao? Thực ra thực hiện công việc này không khó, bạn có thể dùng plugin Font Awesome More Icons hoặc đơn giản nhất là chèn đoạn mã sau vào header.php

Ngoài ra bạn có thể tại tải bộ Font Awesome về máy rồi đưa lên thư mục chứa theme bạn đang sử dụng để có thể chèn thủ công. Sau đó bạn mở file functions.php và thêm vào đoạn mã bên dưới và đừng quên thay đổi đường dẫn sao cho chính xác

Để sử dụng bạn chỉ cần thay đổi class ứng với icon mà bạn muốn chèn xem tại danh sách icon Font Awesome. Ví dụ:

Thêm icon vào Menu WordPress

Ở bài trước mình đã hướng dẫn cách tạo menu WordPress rồi nên giờ bạn chỉ cần cách sử dụng Font Awesome ở bên trên để chèn vào. Bạn thêm vào trước văn bản menu của bạn như hình sau.Thêm icon vào Menu WordPress

Sau đó bạn lưu lại và xem kết quả có giống như của mình không 😀

wordpress menu icons

Thêm icon vào bài viết

Ngoài thêm icon vào menu WordPress thì mình hướng dẫn thêm cách chèn icon vài bài viết nếu như bạn có nhu cầu. Bạn cần tìm và cài đặt plugin Font Awesome More Icons hoặc Better Font Awesome sau đó kích hoạt lên thì sẽ có menu chọn icon ở khung soạn thảo văn bản.

Better Font Awesome

Bây giờ muốn thêm icon nào thì chọn cái icon đó thôi. Rất đơn giản đúng không?

Thêm icon vào menu WordPress với Font Awesome
5 (1 vote)

Để lại một bình luận

12 Bình luận trên "Thêm icon vào menu WordPress với Font Awesome"

avatar
700
Phúc Bình
Khách

Có cách nào thêm icon vào Widget không bạn

Mộc
Khách
hung
Khách

bạn ơi sao mình cài theme giống bạn đang dùng mà trong phần bài viết không hiện cái phần khung thông tin tác giả “post by Nam Ngô” giống của bạn vậy, cả mục có thể bạn quan tâm nữa

Nam Ngô
Khách

Bạn vào Customize để bật/tắt nha

Hưng
Khách

anh cho em xin tên font Primary font và Secondary font dùng cho blog anh với ạ!

Nam Ngô
Khách

Noto Serif nha bạn ơi 😀

Hưng
Khách

cả 2 font đều là Noto Serif hả bạn. sao mình chỉnh Secondary font
là Noto Serif thì bị lỗi font chữ vậy bạn :/

Nam Ngô
Khách

Theme bạn có hỗ trợ Google Font không?

Hưng
Khách

mình đang dùng theme giống bạn mà. lúc cài ở bài viết có 2 mục share ở đầu và cuối giống blog bạn. nhưng mình tắt đi giờ bật lên chỉ hiện mỗi share ở đầu. cuối bài ko hiện. bạn có biết tại sao ko. mình bật ở layouts > posts > show post share

Nam Ngô
Khách

Bạn chèn

vào vị trí cần hiển thị nhé!

Hưng
Khách

vậy là phải sửa Css hả bạn. mình k rành css lắm bạn chỉ rõ hơn là ở đoạn nào trong css được không hic @@

Nam Ngô
Khách

Cái này bạn chỉnh trong partials/content-single.php nhé!

Đăng kí BẢN TIN

Đăng kí BẢN TIN

Đăng kí bản tin to cập nhật bài viết nhanh nhất and receive the following phần quà hấp dẫn từ Nam Ngô Blog.

Bạn đã đăng kí thành công!