Hướng dẫn 3 cách thêm font awesome cho blogspot mà không là giảm tốc độ tải trang

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.
thêm font awesome cho blogspot
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ó.
Font Awesome

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.

0 Response to "Hướng dẫn 3 cách thêm font awesome cho blogspot mà không là giảm tốc độ tải trang"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel