Nhập phông chữ css tuyệt vời

Font Awesome Free and Pro for 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. Trợ giúp cho đại đa số mọi người hiểu về Phông chữ Tuyệt vời và cách sử dụng Phông chữ Tuyệt vời bản Miễn phí cũng như bản Pro. Nào cùng RealDev bắt đầu nhé ^^

Nhập phông chữ css tuyệt vời
Phông chữTuyệt vời

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 thành viên Lập trình đến từ Nước Mỹ cùng các thành viên cộng tác 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 định dạng phông chữ là OTF và TTF. Font Awesome chia ra hai dạng sử dụng cho Desktop và Website, trong đó

  1. Desktop bao gồm Metadata, SVG và Fonts OTF, TTF
  2. Trang web bao gồm CSS, SCSS, SVG, Javascript, Metadata và phông chữ là TTF

Với trang web thông thường khi sử dụng, trình thiết lập thành viên thường ưu tiên sử dụng định dạng hiển thị CSS. Do tính chất dễ dàng 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 Phông chữ Tuyệt vời

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

  1. Font Awesome bản Miễn phí (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$, hạn năm thứ 2 là 99$. Với bản Pro Max là 499$

Phông chữ Tuyệt vời có bao nhiêu biến thể (Phông chữ Biến thể). ?

Font Awesome có tổng cộng 03 biến thể bên dưới

  1. Phông chữ cổ điển tuyệt vời
  2. Phông chữ Sắc nét Tuyệt vời
  3. Phông chữ thương hiệu tuyệt vời

Font Awesome Classic is what. ?

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 is what. ?

Font Awesome Sharp là phiên bản không bo góc, thiên về sắc nét của các giao diện gần nhau của Icon Font. Biến Sharp only support Kiểu dáng (Style) is 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ợ Kiểu dáng (Kiểu dáng)

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. song âm
  2. Ánh sáng
  3. Thường xuyên
  4. Chất rắn
  5. Gầy

Tuy nhiên, các Style ở trên sẽ được phân cấp theo phiên bản đang sử dụng là Free hoặc 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 có thể là Classic,

function r_add_fontawesome_link(){
    echo '';
}
add_action('wp_footer','r_add_fontawesome_link');
0, Brands. Tuy nhiên, sẽ bị giới hạn theo thuộc tính
function r_add_fontawesome_link(){
    echo '';
}
add_action('wp_footer','r_add_fontawesome_link');
2 cho Kiểu dáng (Phong cách) Solid
function r_add_fontawesome_link(){
    echo '';
}
add_action('wp_footer','r_add_fontawesome_link');
4 với Kiểu dáng (Phong cách)
function r_add_fontawesome_link(){
    echo '';
}
add_action('wp_footer','r_add_fontawesome_link');
5 và Biến thể Brands , cũng như giới hạn một số Biểu tượng Phông chữ Phong cách. Ngoài ra, Font Awesome bản Free sẽ được sử dụng 02 Kiểu dáng (Style) là
function r_add_fontawesome_link(){
    echo '';
}
add_action('wp_footer','r_add_fontawesome_link');
5 và Solid

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

Font Awesome Pro được sử dụng đầy đủ các biến có thể. Classic,

function r_add_fontawesome_link(){
    echo '';
}
add_action('wp_footer','r_add_fontawesome_link');
0, Brands. Một điều quan trọng nữa là Font Awesome Pro sẽ không giới hạn
7FCCFF81-F219-4384-9ADE-E41353D5F7DE
2 vì bạn có thể sử dụng tất cả các thuộc tính
7FCCFF81-F219-4384-9ADE-E41353D5F7DE
2 mà Font Awesome Pro có sẵn. Ngoài ra, Font Awesome bản Pro sẽ sử dụng toàn bộ các Kiểu dáng (Kiểu dáng) là.
7FCCFF81-F219-4384-9ADE-E41353D5F7DE
4,
7FCCFF81-F219-4384-9ADE-E41353D5F7DE
5,
function r_add_fontawesome_link(){
    echo '';
}
add_action('wp_footer','r_add_fontawesome_link');
5, Solid,
7FCCFF81-F219-4384-9ADE-E41353D5F7DE
8

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 Phông chữ trong thư mục Chủ đề
  2. Sử dụng Plugin Font Awesome
  3. Use Function in function. php của Theme đang hoạt động

1. Thêm Phông chữ Tuyệt vời Miễn phí vào Trang web WordPress bằng cách sử dụng tệp Phông chữ trong thư mục Chủ đề/Phông chữ

Bước 1. To use this way. Trước hết bạn cần truy cập vào đường dẫn sau và tải xuống Font Awesome Free bản mới nhất về

Tải FontAwesome Free mới nhất chính hãng

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

Nhập phông chữ css tuyệt vời
Tải xuống FontAwesome miễn phí

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

Nhập phông chữ css tuyệt vời
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ưu lại 02 thư mục là CSS và WEBFONTS. You can't tham khảo cấu hình bên dưới

Nhập phông chữ css tuyệt vời
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 thư mục CSS và xóa hết các tập tin. css chỉ giữ lại tất cả. tối thiểu. css

Nhập phông chữ css tuyệt vời
Thư mục CSS đầy đủ trước khi xóa

Nhập phông chữ css tuyệt vời
Thư mục CSS giữ lại tất cả. tối thiểu. 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é ^^

Nhập phông chữ css tuyệt vời
Truy cập /public_html/wp-content/themes/ và chọn Folder Themes đang hoạt động của bạn

Bước 7. Tạo thư mục và đặt tên cho Thư mục là phông chữ

Nhập phông chữ css tuyệt vời
Tạo thư mục và đặt tên là phông chữ

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

mẹo. Thư mục 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

Nhập phông chữ css tuyệt vời
Sau khi Uploads up, Folder fonts will like this

Bước 9. Bạn đang tiến hành Sao chép và dán đoạn mã sau vào Chân trang 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. Căn hộ / Nâng cao / Cài đặt toàn cầu
  • cách 2. Với các Chủ đề khác không được hỗ trợ, bạn sử dụng Plugin Chèn đầu trang và chân trang
  • Cách 3. Sử dụng hàm trong Functions. php

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

Theo Cách 1 và Cách 2. You Copy Code after and paste into the position that RealDev đã hướng dẫn

Với Cách thứ 3. Bạn truy cập vào Giao diện (Themes) / Theme File Editor / functions. php to drag down the bottom of the same file functions of You. Lý do kéo xuống cuối cùng là để không ảnh hưởng đến các chức năng khác đang có. You process to Copy code and paste into file functions. php and save back

function r_add_fontawesome_link(){
    echo '';
}
add_action('wp_footer','r_add_fontawesome_link');

Bước 10. Bạn tiến hành thêm Phông chữ Tuyệt vời vào Trang web của bạn, vì đến bước này Trang web của bạn đã tải được Phông chữ Tuyệt vời

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

Cách này RealDev không khuyến mãi cho lắm vì phải cài đặt Plugin. Vì mỗi plugin được cài đặt vào Trang web là lại có một cổng 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 Plugin / Thêm mới (Add new)

Bước 2. Trong giao diện cài đặt plugin mới. Ta gõ vào khung tìm kiếm với nội dung. phông chữ tuyệt vời và nhấn Cài đặt ngay (Cài đặt). Sau khi cài đặt thành công chúng ta kích hoạt

Nhập phông chữ css tuyệt vời
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. You Click chuột vào Cài đặt

Nhập phông chữ css tuyệt vời
Nhấp vào Cài đặt để thiết lập tiến trình cài đặt cho FontAwesome

Ghi chú. Các Plugin mình hiển thị ở trang Demo RealDev không phải là Plugin mình thường sử dụng. Mình cài đặt là để hướng dẫn dễ dàng 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 điều gì cũng đáng trách về Website của mình thành ra lại dở hơi ^^

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

Nhập phông chữ css tuyệt vời
Chuyển sang TAB Use a Kit để sử dụng API Token

Tạo trang này bạn nhấn vào liên kết 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 tài khoản

Bước 5. Sau khi đăng ký / đăng nhập trên trang FontAwesome. You scroll mouse down to API Tokens to copy API code on your Website

Nhập phông chữ css tuyệt vời
Sao chép API FontAwesome

Nếu anh thấy quá phức tạp tạo tài khoản. RealDev Tặng anh em mã API của mình. Nó là miễn phí và tối đa là 10. 000 lượt tải trang trong tháng

7FCCFF81-F219-4384-9ADE-E41353D5F7DE

Bước 6. Dán Mã thông báo API mới sao chép vào trang Cài đặt của Plugin Phông chữ Tuyệt vời. Click vào Save API Token để lưu lại

Nhập phông chữ css tuyệt vời
Dán API mới sao chép và nhấp vào Lưu mã thông báo API

Bước 7. Bạn tiến hành thêm Phông chữ Tuyệt vời vào Trang web của bạn, vì đến bước này Trang web của bạn đã tải được Phông chữ Tuyệt vời

3. Thêm Font Awesome vào Website WordPress sử dụng Chức năng

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

To use Bạn truy cập vào Giao diện (Themes) / Theme File Editor / functions. php to pull down the bottom of the same file functions of You. Lý do kéo xuống cuối cùng là để không ảnh hưởng đến các chức năng khác đang có. You process to Copy code and paste into file functions. php and save back

//RealDev Enqueeue FontAwesome 6 Free
add_action('wp_footer', function(){
	echo '';
});

Cách hợp nhất 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 nhé các bạn

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 các thao tác sử dụng sao cho đạt hiệu quả cao nhất

To display Font Awesome on your Website, 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 (Kiểu dáng) CSS

Hiển thị Phông chữ tuyệt vời bằng thẻ HTML

Trước hết dù là HTML hay CSS thì các bạn đều cần truy cập vào https. // phông chữ tuyệt vời. com/tìm kiếm

Lưu ý. Để không bị “Copy hết mình – Hiển thị hết hồn” thì các bạn 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 được nhảy nhé

Nhập phông chữ css tuyệt vời
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 nhập tìm kiếm và nhấn Enter. Kết quả sẽ hiển thị ra các biểu tượng đú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ụ. User / Tác giả thì gõ “User” nhé ^^

Sau đó, bạn nhấp vào biểu tượng bạn muốn và nhấp vào thẻ HTML để sao chép. Xem hình minh họa cho dễ hiểu nhé ^^

Nhập phông chữ css tuyệt vời
Nhấp vào mã HTML sẽ tự động sao chép và có thông báo Đã sao chép thành công

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









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

Nhập phông chữ css tuyệt vời
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 tại đây

Xem ngay cho nóng ^^

Hiển thị Font Awesome bằng CSS

Như mình nói ở trên. “Trước hết dù là HTML hay CSS, các bạn đều cần truy cập vào https. // phông chữ tuyệt vời. com/tìm kiếm“

    
  • Ba là cây nến vàng
  • Mẹ là cây nến xanh
  • Con là cây nến hồng
  • Ba ngọn nến lung linh
  • la là lá la la
  • Cháy hết một căn nhà ^^

Mình sẽ thêm đoạn HTML với lớp cho thẻ cha

7FCCFF81-F219-4384-9ADE-E41353D5F7DE
9 là
//RealDev Enqueeue FontAwesome 6 Free
add_action('wp_footer', function(){
	echo '';
});
0 và tiến hành thêm một số biểu tượng mã để hiển thị Font Awesome thông qua CSS

Để CSS cho thẻ

//RealDev Enqueeue FontAwesome 6 Free
add_action('wp_footer', function(){
	echo '';
});
1 đầu tiên có nội dung
//RealDev Enqueeue FontAwesome 6 Free
add_action('wp_footer', function(){
	echo '';
});
2 thì mình sẽ sử dụng CSS cho lớp là
//RealDev Enqueeue FontAwesome 6 Free
add_action('wp_footer', function(){
	echo '';
});
3. Và gán vào phía trước với css pseudo là
//RealDev Enqueeue FontAwesome 6 Free
add_action('wp_footer', function(){
	echo '';
});
4 cho biểu tượng là người dùng có mã là f007

Nhập phông chữ css tuyệt vời
User format Solid of FontAwesome 6 is. f007. Cách Sao chép giống như Sao chép HTML ở trên

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

Nhập phông chữ css tuyệt vời
Thêm biểu tượng FontAwesome bằng CSS

Lưu ý. Font Awesome thêm bằng CSS chủ yếu qua. before and. sau đó. Vì vậy nó cần thuộc tính nội dung. ”;

Điều thứ 2 luôn luôn phải có dấu \ trước mã biểu tượng phông chữ ví du. nội dung. ‘\f2bd’;

Một điều quan trọng là bạn bắt buộc phải khai báo thuộc tính

//RealDev Enqueeue FontAwesome 6 Free
add_action('wp_footer', function(){
	echo '';
});
5 để có thể hiển thị đúng biểu tượng

You can can add with CSS. before and. sau bạn nhé

Nhập phông chữ css tuyệt vời
CSS. before and. after to display FontAwesome

Xem Demo CSS FontAwesome

Tổng kết

Bởi 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 gửi 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, thêm Font Awesome 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 để mọi người dễ sử dụng nhất, thuận tiện nhất khi chỉ cần Copy – Paste là có thể sử dụng được