[blog]
Font Awesome là bộ công cụ phông chữ và biểu tượng dựa trên CSS và Ít hơn. Nó được tạo bởi Dave Gandy để sử dụng với Bootstrap và sau đó được tích hợp vào BootstrapCDN. Font Awesome chiếm 38% thị phần trong số các trang web sử dụng tập lệnh phông chữ của bên thứ ba trên nền tảng của họ, xếp thứ hai sau Google Fonts.
Tương tự như vậy có thể áp dụng với tất cả các phiên bản của Font Awesome
[/blog]
Font Awesome là bộ công cụ phông chữ và biểu tượng dựa trên CSS và Ít hơn. Nó được tạo bởi Dave Gandy để sử dụng với Bootstrap và sau đó được tích hợp vào BootstrapCDN. Font Awesome chiếm 38% thị phần trong số các trang web sử dụng tập lệnh phông chữ của bên thứ ba trên nền tảng của họ, xếp thứ hai sau Google Fonts.
Rất tiện lợi trong quá trình thiết kế giao diện blog, website, nhược điểm của nó là khá nặng làm chậm tốc độ tải trang nếu như chúng ta không tối ưu nó.
Dưới đây là link Font Awesome với phiên bản 5.11.2
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css
1. Cách chèn thường dùng
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' rel='stylesheet'/>
Với cách này thì làm cho tốc độ load trang của blog chậm, bị cảnh báo Page Speed.
2. Sử dụng Script như dưới
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) {
"use strict";
var i = window.document.createElement("link");
var o = t || window.document.getElementsByTagName("script")[0];
i.rel = "stylesheet";
i.href = e;
i.media = "only x";
o.parentNode.insertBefore(i, o);
setTimeout(function() {
i.media = n || "all"
})
}
loadCSS("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css");
//]]>
</script>
3. Chèn file trực tiếp
Các bạn copy dán dưới thẻ <b:skin>
@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:normal;font-display:auto;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-brands-400.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-brands-400.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-brands-400.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-brands-400.ttf) format("truetype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-brands-400.svg#fontawesome) format("svg")}
.fab{font-family:"Font Awesome 5 Brands"}
@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:auto;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-regular-400.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-regular-400.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-regular-400.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-regular-400.ttf) format("truetype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-regular-400.svg#fontawesome) format("svg")}
.far{font-weight:400}
@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:auto;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-solid-900.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-solid-900.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-solid-900.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-solid-900.ttf) format("truetype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-solid-900.svg#fontawesome) format("svg")}
.fa,.far,.fas{font-family:"Font Awesome 5 Free"}
.fa,.fas{font-weight:900}Tương tự như vậy có thể áp dụng với tất cả các phiên bản của Font Awesome
Đối với cách thứ 3 này các link file của font thì lấy ở đâu?
Các bạn mở đường dẫn trên trình duyệt
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css
Sau đó kéo xuống dưới cùng, các bạn nhấn CTRL F tìm @font-face sẽ thấy
Các bạn copy hết nó từ @font-face đầu tiên cho tới cuối luôn
Sau đó các bạn thay lại URL cho nó ví dụ như
url(../webfonts/fa-brands-400.woff2)
Thì chúng ta thay dấu 2 chấm thành link https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2
Mỗi phiên bản nó có link khác nhau nhé, các bạn cứ lấy link của nó rồi bỏ đi 2 thư mục (2 dấu / phía trước) là được.
Có bao nhiêu chỗ dấu 2 chấm thì các bạn thay hết, dùng Notepadd++ sau đó sử dụng chức năng Replace All cho nhanh nhé.
Như vậy là xong, 3 cách chèn thư viện Font Awesome cho blogspot.
[/blog]
Nhận xét
Đăng nhận xét