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é ^^ Show
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 đó
Có bao nhiêu loại Phông chữ Tuyệt vờiCó 02 loại Font Awesome bao gồm
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
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ể 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 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ể 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
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à 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 và 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ể. 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-E41353D5F7DE2 vì bạn có thể sử dụng tất cả các thuộc tính 7FCCFF81-F219-4384-9ADE-E41353D5F7DE2 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-E41353D5F7DE4, 7FCCFF81-F219-4384-9ADE-E41353D5F7DE5, function r_add_fontawesome_link(){ echo ''; } add_action('wp_footer','r_add_fontawesome_link');5, Solid , 7FCCFF81-F219-4384-9ADE-E41353D5F7DE8 Cách tích hợp Font Awesome Free vào Website WordPressCó 03 cách tích hợp Font Awesome Free vào Website WordPress bao gồm
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énBướ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ạiBướ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óaThư mục CSS giữ lại tất cả. tối thiểu. cssBướ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ạnBướ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 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
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 PluginCá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 Tìm kiếm và cài đặt Plugin FontAwesomeBướ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 vào Cài đặt để thiết lập tiến trình cài đặt cho FontAwesome
Bước 4. Tại trang thiết lập (Settings). Bạn chuyển sang Tab Use a Kit Chuyển sang TAB Use a Kit để sử dụng API TokenTạ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 Sao chép API FontAwesome
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 Dán API mới sao chép và nhấp vào Lưu mã thông báo APIBướ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ăngCá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 WebsiteVớ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ệpSau 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
Hiển thị Phông chữ tuyệt vời bằng thẻ HTMLTrướ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 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
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 vào mã HTML sẽ tự động sao chép và có thông báo Đã sao chép thành côngVí 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 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 CSSNhư 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“
Mình sẽ thêm đoạn HTML với lớp cho thẻ cha 7FCCFF81-F219-4384-9ADE-E41353D5F7DE9 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à f007User 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 Thêm biểu tượng FontAwesome bằng CSS
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é CSS. before and. after to display FontAwesomeXem Demo CSS FontAwesome Tổng kếtBở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 |