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é ^^

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

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

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

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

Thư mục CSS đầy đủ trước khi xóa

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é ^^

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ữ

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

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

Chủ Đề