Hướng dẫn thêm icon trong WordPress với Font Awesome

Chèn icon vào bài viết WordPress

Kể từ hôm mình sử dụng giao diện mới có sử dụng icon Font Awesome trên menu thì cũng có một vài bạn đã hỏi qua về cách chèn icon như thế vào menu hoặc các phần khác trong WordPress thì làm như thế nào. Nếu bạn bảo là dùng hình ảnh thì cũng không sai, chỉ có điều đó không phải là cách mà chúng ta nên bây giờ vì site có nhiều ảnh quá cũng sẽ khiến tốc độ chậm lại.

Vậy giải pháp sử dụng icon trong WordPress tối ưu nhất là gì? – Xin thưa, chúng ta sẽ sử dụng Symbol Font (font chữ kiểu ký hiệu), mà cụ thể là ở đây chúng ta sẽ sử dụng FontAwesome.

Chèn icon vào bài viết WordPress

FontAwesome là như thế này

FontAwesome là gì?

Để khỏi mất thời gian thì mình cũng xin nói nhanh qua thôi nhé, FontAwesome là một thành phần mở rộng trong Bootstrap Framework (bạn vẫn có thể dùng mà không cần Bootstrap) để chèn các icon (ký hiệu) vào website bằng font chữ. Để dễ hình dung hơn, bạn cứ tưởng tượng FontAwesome là sản phẩm của một font chữ dạng ký tự trên máy tính khi nó được render ra thành font chữ sử dụng trên website mà nó có thể hiển thị ở trình duyệt.

Tóm lại là FontAwesome là một kiểu font giúp bạn chèn các icon vào web.

Cài FontAwesome vào WordPress

Thực ra cài FontAwesome vào WordPress không khó, nếu bạn đã rành về HTML rồi thì có thể làm được ngay khi tải gói FontAwesome về máy. Tương tự bạn có thể làm như vậy ở WordPress.

Tuy nhiên, do nhiều bạn ở đây cứ sợ động vào code nên trong bài này mình không hướng dẫn cách chèn FontAwesome thủ công mà mình sẽ giới thiệu bạn một plugin nhỏ giúp bạn làm việc này, kèm theo nhiều tính năng đặc trưng khác mà nếu bạn chèn thủ công thì sẽ không có. Đó chính là plugin Font Awesome More Icons.

Chèn FontAwesome vào WordPress

Chèn FontAwesome vào WordPress

Tại sao mình lại khuyên bạn nên dùng Font Awesome More Icons nhỉ? Bởi vì ngoài việc nó giúp bạn chèn FontAwesome vào WordPress dễ dàng thì nó còn hỗ trợ cả shortcode nữa để bạn có thể chèn vào trong bài viết một cách dễ dàng, nhờ vậy mà bài bạn có thể sẽ lung linh hơn nhiều đấy.

Các bạn cứ tiến hành cài đặt plugin này như bao plugin bình thường khác nhé, sau đó xem cách sử dụng bên dưới.

Cách sử dụng Font Awesome

1. Cách sử dụng cơ bản

Cách sử dụng FontAwesome cũng vô cùng đơn giản, bạn chỉ cần đặt một class tương ứng với tên từng icon trong danh sách icon của Font Awesome là được. Bạn có thể đặt class ở bất cứ thẻ nào (div, span, strong, b, a, li,…fap..fap). Ví dụ



<span class="font-apple"></span>


Lúc này kết quả sẽ như thế này

Chèn icon của FontAwesome vào WordPress

Icon quả táo có class là icon-apple

Nói thế chắc bạn cũng hiểu rồi ha, nhớ kỹ là danh sách class của FontAwesome thì xem tại đây nhé.

2. Cách chèn vào Menu WordPress

Để chèn vào menu thì cũng tương tự, bạn viết đoạn thẻ span chứa class của font ngay đằng trước tên menu của bạn nhé. Ví dụ:

Chèn Font Awesome vào menu WordPress

Chèn Font Awesome vào menu WordPress

Rất đơn giản phải không nào.

3. Sử dụng Shortcode trong bài

Nếu bạn dùng plugin Font Awesome More Icons thì nó đã có tích hợp sẵn tính năng chèn icon vào bài viết với shortcode vô cùng tiện lợi, đó là sử dụng menu chọn font mà nó tích hợp sẵn bên trong khung soạn thảo khi cài plugin. Đây là lý do mình rất thích plugin này hè hè.

Chèn FontAwesome vào bài viết

Chèn FontAwesome vào bài viết

Bạn có thể đặt thẻ h1, h2, h3 cho nó để nó hiển thị to ra, và bạn cũng có thể thêm màu cho nó nữa nhé vì đây là font chữ mà. Kết quả nè

Chèn icon vào bài viết WordPress

Bạn có thể thêm màu chữ và in đậm, bôi nghiêng đủ kiểu cho nó.

Hy vọng với bài đơn giản này sẽ giải quyết được thắc mắc của một số bạn về cách chèn font vào WordPress. :look_down:

Nguồn: Hướng dẫn thêm icon trong WordPress với Font Awesome | Thạch Phạm

Categories: Content Marketing, Digital Marketing, Google Ads, Kinh doanh, PHP, SEO, Server - Hosting, WordPress, WordPress Development, Wordpress Plugin, WordPress Theme, Wordpress Tutorial,
Tags: baemin, bán hàng online, bán hàng online trên facebook, bán hàng qua facebook, bán hàng quần áo, bán hàng thời trang, bán hàng trên baemin, bán hàng trên facebook, bán hàng trên fanpage, bán hàng trên grab, bán hàng trên marketplace, bán hàng trên now, bán hàng trên tiktok, báo cáo kết quả hoạt động kinh doanh, bí quyết kinh doanh online, bít tết Âu việt, black friday, buôn bán hàng thùng, buôn bán hàng thùng tuyển chọn, cách bán hàng online đắt khách, cách bán hàng trên marketplace, cách bán hàng trên tiktok, câu chuyện kinh doanh, câu chuyện thành công, chương trình khuyến mãi, công nghệ phần mềm bán hàng, cửa hàng cafe, cửa hàng minh tuấn mobile, cửa hàng phụ kiện, cửa hàng thời trang, cửa hàng thực phẩm, cửa hàng thực phẩm sạch, doanh số bán hàng, dox garage & coffee, dox garage &amp; coffee, đăng ký bán hàng trên baemin, đăng ký bán hàng trên go food, đăng ký bán hàng trên grab, đăng ký bán hàng trên now, facebook, facebook pos, fanpage, file excel, file excel báo cáo kết quả kinh doanh, file excel quản lý kho, foodngon, go food, go jek, grab, halo mobile, khởi nghiệp, khởi nghiệp kinh doanh, khởi nghiệp kinh doanh thời trang, kinh doanh cafe, kinh doanh điện thoại, kinh doanh điện tử điện máy, kinh doanh đồ handmade, kinh doanh gì sau dịch, kinh doanh mỹ phẩm, kinh doanh mỹ phẩm online, kinh doanh nhà hàng, kinh doanh online, kinh doanh phụ kiện, kinh doanh quán cafe, kinh doanh shop thời trang, kinh doanh siêu thị mini, kinh doanh spa, kinh doanh thành công, kinh doanh thời trang, kinh doanh thời trang trẻ em, kinh doanh thực phẩm, kinh doanh thực phẩm sạch thành công, kinh doanh trên facebook, kinh doanh trên grab, kinh nghiệm bán hàng, kinh nghiệm kinh doanh, làm đồ handmade, lily shop, link kháng tài khoản quảng cáo, lụa tơ tằm bá minh, marketing online, mặt hàng dễ bán, mẹo bán hàng, mẹo bán hàng trên facebook, mẹo hay, ngày black friday năm 2020 là ngày nào?, now, now - foody, phầm mềm quản lý bán hàng miễn phí, phần mềm chốt đơn, phần mềm chốt đơn hàng, phần mềm miễn phí, phần mềm pos, phần mềm quản lý bán hàng, phần mềm quản lý bán hàng đáng tin cậy, phần mềm quản lý bán hàng miễn phí, phụ kiện ben & tony, phụ kiện ben &amp; tony, phụ kiện hà xinh, quán cafe hiệu quả, quản lý cửa hàng, quản lý cửa hàng thời trang, quản lý nhà hàng, quản lý nhân viên, quản lý nhân viên cứng đầu, quản lý nhân viên thời vụ, quảng cáo thương hiệu, shop thời trang, shopee, siêu thị minimart, status, status bán hàng, status quảng cáo mỹ phẩm, stella spa, stt bán hàng online hài hước, stt tương tác bán hàng, t.u.s shop, tài khoản bị vô hiệu hóa, tài khoản facebook, tài khoản facebook bị vô hiệu hóa, tải miễn phí file excel quản lý kho, tăng doanh thu mùa black friday, thời trang kosta, thời trang mine, thời trang tú trần shop, thực phẩm sạch, thực phẩm sạch 02, thực phẩm sạch tâm an, thuê mặt bằng kinh doanh, tiki, tiktok, tú trần shop,
Tạo trang đăng bài dành cho thành viên trong WordPress
Đăng nhập vào WordPress bằng điện thoại với Clef
Tác giả

Bình luận

chwilówki online

Sprawdź ranking na chwilówki online i weź szybką pożyczkę internetową lub kredyt przez internet.

Leave a Message

Registration isn't required.

NguyenLp LarTheme