Tạo Icon Menu với Thư viện FONT AWESOME

Tất cả những gì bạn cần làm là thêm các lớp CSS sau khi kích hoạt thư viện Font Awesome này và các biểu tượng thích hợp sẽ được đặt bên cạnh các tùy chọn menu.
Bước 1. Chuyển đến Bảng điều khiển> Giao diện> Trình chỉnh sửa. Function.php của theme đang sử dụng và thêm vào như sau.

<? php 
function wmpudev_enqueue_icon_stylesheet () { 
    wp_register_style ( 'fontawesome', 'http:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'); 
    wp_enqueue_style ('fontawgie'); 
} 
add_action ('wp_enqueue_scripts', 'wmpudev_enqueue_icon_stylesheet'); 
?>

Bạn cũng có thể tải lên thư mục lưu trữ mã nguồn CSS của theme đang sử dụng với file: font-awesome.min.css và sử dụng Function để load sử dụng cho toàn bộ trang web. Thậm chí bạn có thể chèn nó trong theme như bất kỳ 1 file css nào khác giống như gọi các file Css, js tại phần của website. Tuy nhiên đây không phải là 1 cách tốt.

Bước 2. Bước này tương tự như những gì bạn đã làm trước đó sẽ vào Bảng điều khiển> Giao diện> Menu. Sau đó nhấp vào Tùy chọn màn hình ở góc trên cùng bên phải và chọn hộp kiểm bên cạnh Lớp CSS.
– Ngay tại Menu, bạn chèn các thẻ class phù hợp để có Icon như mình muốn.
+ Một gợi ý nhỏ: Bạn hãy xem trên góc phải, Click => mở rộng => ticket => Class
Bước 3.
Điều quan trọng là sử dụng tên lớp chính xác để các biểu tượng thích hợp được đặt bên cạnh các tùy chọn menu. Sau đây là danh sách các tên lớp đi kèm với Font Awesome và bạn nên sử dụng chúng cho phù hợp.

– Dành cho Gia đình: fa-lg fa-home
– Dành cho Tin tức: fa-lg fa-báo-o
– Dành cho Thư viện: fa-lg fa-camera-retro
– Dành cho Giới thiệu: fa-lg fa-information-circle
– Dành cho Liên hệ: fa fa-lg fa-phong-o

Trong đó fa là viết tắt của lớp chính, fa-lg là viết tắt của các biểu tượng lớn và phần còn lại theo yêu cầu. Ví dụ: bạn vào Bảng điều khiển> Giao diện> Menu và chọn menu Chính.

Tùy chọn nhà sẽ là tùy chọn đầu tiên và vì thế, bạn nên sử dụng fa fa-lg fa-home làm tên lớp để khi bạn lưu nó và làm mới trang chủ của mình, bạn có thể thấy sự thay đổi.

Nếu bạn có kiến ​​thức về CSS, bạn có thể dễ dàng thay đổi Phông chữ CSS tuyệt vời và thực hiện các thay đổi cần thiết theo yêu cầu của bạn.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *