Font Awesome Free và Pro cho WordPress Toàn Tập

FontAwesome Free và FontAwesome Pro cùng hướng dẫn Thêm FontAwesome và Website WordPress. Chi tiết, có hình minh họa, hiệu quả, dễ hiểu

Font Awesome Free và Pro cho WordPress Toàn Tập là bài đăng tâm huyết chia sẻ từ cơ bản đến chuyên sâu của RealDev. Giúp cho đại đa số mọi người hiểu về Font Awesome và cách sử dụng Font Awesome bản Free cũng như bản Pro. Nào cùng RealDev bắt đầu nhé ^^

Font-awesome-realdev
FontAwesome

Font Awesome Toàn Tập bắt đầu từ tìm hiểu Font Awesome là gì.?

Font Awesome là sản phẩm của các Lập trình viên đến từ Nước Mỹ cùng các cộng tác viên trên toàn thế giới. Ngôn ngữ sử dụng cho Font Awesome bao gồm CSS, SCSS, LESS, SVG, JavaScript, Metadata, và hai dạng font là OTF và TTF. Font Awesome chia ra hai dạng sử dụng là cho Desktop và Website, trong đó:

  1. Desktop gồm có Metadata, SVG và Fonts OTF, TTF.
  2. Website gồm có CSS, SCSS, SVG, Javascript, Metadata, và fonts là TTF.

Với Website thông thường khi sử dụng, các nhà lập trình viên thường ưu tiên sử dụng dạng hiển thị CSS. Do tính chất dễ tùy biến và ghi đè, cũng như dễ dàng nâng cấp trong tương lai.

Có bao nhiêu loại Font Awesome

Có 02 loại Font Awesome bao gồm:

  1. Font Awesome bản Free (Miễn phí). Phí sử dụng và duy trì là miễn phí.
  2. Font Awesome bản Pro. Phí sử dụng cho bản Pro năm đầu là 79$ gia hạn năm thứ 2 là 99$. Với bản Pro Max là 499$.

Font Awesome có bao nhiêu biến thể (Variants Font).?

Font Awesome có tổng cộng 03 biến thể dưới đây:

  1. Font Awesome Classic
  2. Font Awesome Sharp
  3. Font Awesome Brands

Font Awesome Classic là gì.?

Font Awesome Classic là phiên bản Phổ biến và thông dụng nhất của Font Awesome. Biến thể Classic hỗ trợ tất cả các Kiểu dáng (Style) mà Font Awesome có.

Font Awesome Sharp là gì.?

Font Awesome Sharp là phiên bản không bo góc, thiên về sắc nét các cạnh giao tiếp nhau của Icon Font. Biến thể Sharp chỉ hỗ trợ Kiểu dáng (Style) là Solid.

Font Awesome Brands là gì.?

Font Awesome Brands là phiên bản trình bày các LOGO của các nhãn hiệu nổi tiếng. Ví dụ: Google, Facebook, Meta, Messenger, Microsoft, Tiktok … Biến thể Brands không hỗ trợ các Kiểu dáng (Style).

Font Awesome có bao nhiêu kiểu dáng (Font Awesome Style).?

Font Awesome có tổng cộng 05 kiểu dáng (Style) bao gồm:

  1. Duotone
  2. Light
  3. Regular
  4. Solid
  5. Thin

Tuy nhiên các Style ở trên sẽ được phân cấp theo phiên bản sử dụng là Free hay Pro. Nếu bạn đang băn khoăn thì đừng lo, mình có giải đáp ngay bây giờ cho bạn. ^^

Font Awesome Free được sử dụng những gì.?

Font Awesome Free được sử dụng 03 biến thể là Classic, Sharp, Brands. Tuy nhiên sẽ bị giới hạn ở thuộc tính font-weight: 900; cho Kiểu dáng (Style) Solidfont-weight: 400; với Kiểu dáng (Style) Regular và Biến thể Brands , cũng như là giới hạn một số Icon Font Style. Ngoài ra, Font Awesome bản Free sẽ được dùng 02 Kiểu dáng (Style) là RegularSolid

Font Awesome Pro được sử dụng những gì.?

Font Awesome Pro được sử dụng đầy đủ các biến thể là: Classic, Sharp, Brands . Một điều quan trọng nữa là Font Awesome Pro sẽ không giới hạn font-weight vì thế Bạn có thể sử dụng tất các các thuộc tính font-weight mà Font Awesome Pro có sẵn. Ngoài ra, Font Awesome bản Pro sẽ dùng được toàn bộ các Kiểu dáng (Style) là: Duotone, Light, Regular, Solid, Thin.

Cách tích hợp Font Awesome Free vào Website WordPress

Có 03 cách tích hợp Font Awesome Free vào Website WordPress bao gồm:

  1. Sử dụng tệp Font trong thư mục Themes
  2. Sử dụng Plugin Font Awesome
  3. Sử dụng Function trong function.php của Theme đang hoạt động

1: Thêm Font Awesome Free vào Website WordPress sử dụng tệp Font trong thư mục Themes/Fonts

Bước 1: Để sử dụng cách này. Trước hết bạn cần truy cập vào đường dẫn sau và tải Font Awesome Free bản mới nhất về:

Bước 2: Bạn cuộn trang đến đoạn như hình vào Click vào Free For Web.

Download-fontawesome-free-realdev
Downloads FontAwesome Free

Bước 3: Sau khi Download về Bạn giải nén tệp .zip mới tải về và ta được như hình dưới

Folder-fontawesome-extract-realdev
Thư mục FontAwesome sau khi Giải nén

Bước 4: Chúng ta xóa hết các thư mục trong Folder chỉ để lại 02 thư mục là CSS và WEBFONTS. Bạn có thể tham khảo hình dưới.

Must-have-fontawesome-folder-realdev
Các thư mục cần thiết để FontAwesome hoạt động sau khi giữ lại

Bước 5: Truy cập vào Folder CSS và xóa hết các file .css chỉ giữ lại all.min.css

Css-fontawesome-folder-full-realdev
Folder CSS đầy đủ trước khi xóa
Css-fontawesome-fonts-less-css
Folder CSS giữ lại all.min.css

Bước 6: Truy cập vào Hosting / VPS và tới Folder Theme đang hoạt động. Hãy nhớ Folder theme đang hoạt động bạn nhé ^^

Fontawesome-uploads-folder-realdev
Truy cập vào /public_html/wp-content/themes/ và chọn Folder Themes đang hoạt động của Bạn

Bước 7: Tạo Folder và đặt tên cho Folder là fonts

Folder-font-structures-fontawesome-realdev
Tạo folder và đặt tên là fonts

Bước 8: Uploads folder css và webfonts lên Hosting / VPS

Mẹo: Folder trên Máy tính bạn nén thành File ZIP và upload lên Hosting / VPS rồi giải nén ra là được.

Uploads-less-fontawesome-folder-realdev
Sau khi Uploads lên thì Folder fonts sẽ như thế này

Bước 9: Bạn tiến hành Copy và dán đoạn code sau vào Footer với một trong 3 cách dưới đây:

  • Cách 1: Với Flatsome bạn vào vị trí Theme Flatsome bạn truy cập: Flatsome / Advanced / Global Settings
  • Cách 2: Với các Themes khác không hỗ trợ, bạn sử dụng Plugin Insert Header And Footer
  • Cách 3: Sử dụng function trong Functions.php

RealDev sẽ hướng dẫn Bạn cả 3 cách trên, không lo nhé ^^

Với cách 1 và Cách 2. Bạn Copy Code sau và dán vào các vị trí mà RealDev đã hướng dẫn:

<link href="<?php bloginfo('template_directory'); ?>/fonts/css/all.min.css" rel="stylesheet">

Với Cách thứ 3. Bạn truy cập vào Giao diện (Themes) / Theme File Editor / functions.php vào kéo xuống dưới cùng của tệp functions của Bạn. Lý do kéo xuống cuối cùng là để không ảnh hưởng đến các function khác đang có. Bạn tiến hành Copy code và dán vào tệp functions.php và lưu lại

function r_add_fontawesome_link(){
    echo '<link href=" '.bloginfo('template_directory').'/fonts/css/all.min.css" rel="stylesheet">';
}
add_action('wp_footer','r_add_fontawesome_link');

Bước 10: Bạn tiến hành thêm Font Awesome vào Website của bạn, vì đến bước này Website của bạn đã load được Font Awesome.

2: Thêm Font Awesome vào Website sử dụng Plugin

Cách này RealDev không khuyến khích cho lắm vì phải cài đặt Plugin. Vì mỗi một plugin được cài vào Website là lại có một cánh cổng được sinh ra. Nhà nhiều cổng thì không tốt cho bảo mật. Chúng ta nên chọn các cách dễ dàng và hiệu quả hơn.

Để cài đặt Plugin Font Awesome chúng ta làm các Bước sau đây:

Bước 1: Truy cập vào Plugins / Thêm mới (Add new)

Bước 2: Trong giao diện trang cài mới plugin. Ta gõ vào khung tìm kiếm với nội dung: font awesome và nhấn Install Now (Cài đặt). Sau khi cài đặt thành công chúng ta nhấn Kích hoạt.

Install-plugin-fontawesome-realdev
Tìm kiếm và cài đặt Plugin FontAwesome

Bước 3: Sau khi kích hoạt sẽ về trang Plugin của WordPress. Bạn Click chuột vào Settings

Settings-fontawesome-plugin-realdev
Click vào Settings để tiến hành thiết lập cho FontAwesome

Ghi chú: Các Plugin mình show ở trang Demo RealDev không phải là Plugin mình thường sử dụng. Mình cài là để hướng dẫn dễ nhất tới các anh em chưa biết nhiều. Vì thế anh em có học nhau cái gì thì học có chọn lọc. Đừng thấy gì cũng bê về Website của mình thành ra lại dở ^^

Bước 4: Tại trang thiết lập (Settings). Bạn chuyển sang Tab Use a Kit

Use-kit-fontawesome-setting-realdev
Chuyển sang TAB Use a Kit để sử dụng API Token

Tạo trang này bạn nhấn vào link Get your API token on fontawesome.com Nếu bạn có tài khoản, vui lòng đăng nhập để sử dụng, nếu chưa có, bạn nên tạo một tài khoản.

Bước 5: Sau khi đăng ký / đăng nhập trên trang FontAwesome. Bạn cuộn chuột xuống đến API Tokens để sao chép mã API về Website của bạn.

Copy-api-fontawesome-realdev
Sao chép API FontAwesome

Nếu anh em thấy quá phức tạp khâu tạo tài khoản. RealDev Tặng anh em mã API của mình. Nó là Free và được tối đa 10.000 lượt load trang trên tháng.

7FCCFF81-F219-4384-9ADE-E41353D5F7DE

Bước 6: Dán API Tokens mới sao chép vào trang Setting của Font Awesome Plugin. Nhấn vào Save API Token để lưu lại

Paste-api-fontawesome-plugin-realdev
Dán API mới sao chép và nhấn vào Save API Token

Bước 7: Bạn tiến hành thêm Font Awesome vào Website của bạn, vì đến bước này Website của bạn đã load được Font Awesome.

3: Thêm Font Awesome vào Website WordPress sử dụng Function

Cách này có vẻ nhàn nhất ^^. Bạn chỉ việc Copy Paste là có thể sử dụng rồi. Mình cũng đã có hướng dẫn ở bài viết Functions.php WordPress Toàn Tập bạn có thể tham khảo nhé.

Để sử dụng Bạn truy cập vào Giao diện (Themes) / Theme File Editor / functions.php vào kéo xuống dưới cùng của tệp functions của Bạn. Lý do kéo xuống cuối cùng là để không ảnh hưởng đến các function khác đang có. Bạn tiến hành Copy code và dán vào tệp functions.php và lưu lại.

//RealDev Enqueeue FontAwesome 6 Free
add_action('wp_footer', function(){
	echo '<link rel="stylesheet preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" as="style" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />';
});

Cách tích hợp Font Awesome 6 Pro vào Website

Với Font Awesome 6 Pro thì bạn làm theo hướng dẫn y chang như cách 1 là Upload lên Hosting/ VPS bạn nhé.

Mình đã từng làm Video hướng dẫn và link tải Font Awesome Pro trong Video bạn nhé.

Các cách sử dụng Font Awesome một cách hiệu quả, chuyên nghiệp

Sau khi đã nhúng Font Awesome vào Website thành công, thì chúng ta sẽ tiến hành sử dụng làm sao cho hiệu quả nhất.

Để hiển thị Font Awesome trên Website của bạn chúng ta có 02 cách:

  • Cách 1: Sử dụng thẻ HTML
  • Cách 2: Sử dụng Kiểu dáng (Style) CSS

Hiển thị Font Awesome bằng thẻ HTML

Trước hết dù là HTML hay CSS thì bạn đều cần truy cập vào https://fontawesome.com/search .

Lưu ý: Để không bị “Copy hết mình – Hiển thị hết hồn” thì bạn hãy Click vào Bộ lọc Free để chỉ hiển thị các Font Icon bản Free thôi nhé ^^. Còn với bản Pro thì quẩy đê anh em ơi, ngại gì vết bẩn, nhạc nào cũng nhảy được nhé.

Select-free-fontawesome-icon-realdev
Click vào Free để không bị Copy hết mình – Hiển thị hết hồn bạn nhé ^^

Sau khi bạn gõ vào tìm kiếm và nhấn Enter. Kết quả sẽ hiển thị ra các icon đúng hoặc gần đúng với ý bạn nhất.

MẸO: Sử dụng tìm kiếm bằng tiếng Anh nhé. Chứ 1 em, 2 em là ko đúng ý tìm đâu nhé. Ví dụ: Người dùng / Tác giả thì gõ “User” nhé ^^

Sau đó bạn Click vào hình icon bạn muốn và click vào thẻ HTML để Copy. Xem hình minh họa cho dễ hiểu nhé ^^

Copy-code-html-fontawesome-realdev
Click vào mã HTML sẽ tự động Copy và có thông báo Copied là thành công

Ví dụ RealDev copy một số thể loại Font Awesome Free và dán vào bài viết / code dưới dạng HTML

<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-magnifying-glass"></i>
<i class="fa-solid fa-user"></i>
<i class="fa-regular fa-user"></i>
<i class="fa-brands fa-facebook"></i>
<i class="fa-solid fa-check"></i>
<i class="fa-solid fa-download"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-regular fa-image"></i>

Kết quả sẽ được như sau:

Display-fontawesome-icon-html
Kết quả hiển thị thành công viên mãn ^^

Bạn có thể xem link mình đăng bài trong hình ở đây:

Hiển thị Font Awesome bằng CSS

Như mình nói ở trên: “Trước hết dù là HTML hay CSS thì bạn đều cần truy cập vào https://fontawesome.com/search

    <ul class="realdev_fontawesome-css">
        <li class="parent">Ba là cây nến vàng</li>
        <li class="mother">Mẹ là cây nến xanh</li>
        <li class="son">Con là cây nến hồng</li>
        <li>Ba ngọn nến lung linh</li>
        <li>la là lá la la</li>
        <li class="fired">Cháy hết một căn nhà ^^</li>
    </ul>

Mình sẽ thêm đoạn HTML với class cho thẻ cha ulrealdev_fontawesome-css và tiến hành thêm một số mã icon để hiển thị Font Awesome thông qua CSS.

Để CSS cho thẻ li đầu tiên có nội dung <li>Ba là cây nến vàng</li> thì mình sẽ sử dụng CSS cho class là .parent . Và gán vào phía trước với css pseudo là :before cho icon là user có mã là f007

Copy-css-fontawesome-realdev
Mã user dạng Solid của FontAwesome 6 là: f007. Cách Copy giống Copy HTML ở trên

Kết quả ta sẽ nhận được như thế này:

Add-css-icon-fontawesome-realdev
Thêm icon FontAwesome bằng CSS

Lưu ý: Font Awesome thêm bằng CSS chủ yếu qua :before và :after. Vì vậy nó cần thuộc tính content: ”; Và trong mỗi mã HTML thì bạn cần bọc chúng bằng dấu phẩy đơn ‘ ‘ hoặc phẩy kép ” “

Điều thứ 2 là luôn luôn phải có dấu \ trước mã icon font ví du: content: ‘\f2bd’;

Một điều quan trọng là bạn bắt buộc phải khai báo thuộc tính font-family: FontAwesome; để có thể hiển thị icon đúng ý.

Bạn có thể thêm với CSS :before và :after bạn nhé.

Before-after-fontawesome-realdev
CSS :before và :after để hiển thị FontAwesome

Tổng kết

Vậy là RealDev đã dành ra mấy tiếng đồng hồ để viết bài chia sẻ Font Awesome Toàn Tập tới Quý anh chị và các bạn. Hi vọng nhận được sự ủng hộ của mọi người ^^. Thực ra, Font Awesome thêm vào Website cực kỳ dễ, không khó. Cái khó là tư duy thẩm mỹ của bạn đến đâu thì bạn sẽ có website đẹp đến đó.

Các Hướng dẫn từ RealDev Blogs luôn luôn theo tôn chỉ là làm sao cho mọi người dễ dùng nhất, thuận tiện nhất khi chỉ cần Copy – Paste là đã có thể sử dụng.

RealDev không khuyến khích và không chịu trách nhiệm nếu Bạn sử dụng các Tài nguyên được chia sẻ trên trang RealDev Blogs với mục đích thương mại.

Sau khi Bạn hài lòng với Hướng dẫn mà RealDev chia sẻ. Đừng quên để lại [Comment], đánh giá [5 Sao] cho các Hướng dẫn chất lượng đến từ Vĩnh Minh Đạo bạn nhé ^^ .

Bởi hành động nhỏ nhưng mang lại động lực to lớn cho RealDev và sự phát triển của Website.

4.8/5 - (174 Yêu thích)
Functions-php-realdev-vn Functions.php WordPress Toàn TậpSecurity Headers Security Headers lên A+ chỉ với Copy PasteRealdev-call-to-action-popup [Cập nhật] Tạo Call To Action WordPress với Popup siêu đẹp | Code and Share by RealDevCach-sua-theme-twenty-twenty-two-truc-tiep-tren-website-screenshot Cách sửa theme Twenty Twenty Two trực tiếp trên WebsiteBạn đang xem: Font Awesome Free và Pro cho WordPress Toàn TậpThêm nút Hotline hoặc Liên hệ khi sản phẩm không có Giá Thêm liên hệ hoặc Hotline khi sản phẩm không có giáSửa lỗi giao diện Tiếng Pháp khi truy cập các trang Website nước ngoài Thêm ngôn ngữ thứ hai tài khoản GoogleFix Virus Website Bị Hack Index Tiếng Nhật, Trung, Nga Website Bị Hack Virus Index Tiếng Nhật và Toàn Tập Các Cách Xử Lý

2 thoughts on “Font Awesome Free và Pro cho WordPress Toàn Tập

  1. Themewp.vn :

    Thiếu cái thêm font awesome bằng unicode css nữa là toàn tập =)

Trả lời

Click vào Comment nhanh ở dưới để chia sẻ suy nghĩ của Bạn.

Hướng dẫn rất chi tiết và dễ hiểu.Tôi đã làm theo hướng dẫn này thành công.Cảm ơn bạn đã chia sẻ kinh nghiệm.Tutorial rất hữu ích.Tôi đã áp dụng hướng dẫn này vào công việc của mình.Chất lượng hướng dẫn thực sự tốt.Hướng dẫn giúp tôi giải quyết vấn đề một cách hiệu quả.Cảm ơn bạn vì đã chia sẻ hướng dẫn này.Tutorial giúp tôi tiết kiệm rất nhiều thời gian.Tôi đã tìm thấy giải pháp từ hướng dẫn này.Chia sẻ hướng dẫn thực sự có giá trị.Tôi rất hài lòng với chất lượng của hướng dẫn.Tutorial thực sự hữu ích cho công việc của tôi.Cảm ơn bạn đã giúp tôi hiểu rõ hơn về vấn đề này.Hướng dẫn đưa ra giải pháp thực sự tốt.

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 *

Đã Copy vào Bộ nhớ tạm