Cách Chèn FontAwesome Cho Blog , Website Không Bị PageSpeed Insights Cảnh Báo

Hiện nay việc sử dung FontAwesome cho Blog , website khá thông dụng .Tuy nhiên có một số bạn vẫn không biết cách sử dụng tối ưu nhất .Khi sử dung FontAwesome không đúng cách sẽ dẫn đến tốc độ load trang sẽ giảm sút .Vì Vậy nếu bạn kiểm tra tốc độ trang website bằng công cụ PageSpeed Insights sẽ xuất hiện một số cảnh báo .Vì vậy hôm nay mình sẽ hướng dẫn các bạn cách để sử dụng FontAwesome không bị PageSpeed Insights Cảnh báo .

CÁCH SỬ DỤNG FONT-AWESOME CHO BLOGSPOT-WEBSITE

Để loại bỏ lỗi, cách tốt nhất là bạn thay thế link font-awesome.min.css bằng cách chèn css trực tiếp của font.

Có 3 cách để khắc phục lỗi này :

Cách 1 :

Chèn đoạn code sau trong thẻ b:skin-/b:skin

<b:skin ><![CDATA[




/* FontAwesome */

@font-face{font-family:FontAwesome;src:url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0);src:url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?#iefixamp;v=4.7.0)format('embedded-opentype'),url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0)format('woff2'),url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0)format('woff'),url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0)format('truetype'),url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular)format('svg');font-weight:400;font-style:normal}

.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;}




]]></b:skin>

Cách 2 :

Chèn code sau trong style type=‘text/css’-/style

<style type='text/css'>
     @font-face{font-family:FontAwesome;src:url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0);src:url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?#iefixamp;v=4.7.0)format(&#39;embedded-opentype&#39;),url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0)format(&#39;woff2&#39;),url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0)format(&#39;woff&#39;),url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0)format(&#39;truetype&#39;),url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular)format(&#39;svg&#39;);font-weight:400;font-style:normal}

.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;}
</style>

Cách 3 :

Chèn trực tiếp trong style type=‘text/css’ - /style nhưng có sử dụng /* ![CDATA[ */

<style type='text/css'>/* <![CDATA[ */

@font-face{font-family:FontAwesome;src:url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0);src:url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?#iefixamp;v=4.7.0)format('embedded-opentype'),url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0)format('woff2'),url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0)format('woff'),url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0)format('truetype'),url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular)format('svg');font-weight:400;font-style:normal}

.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;}

/* ]]> */</style>

Nếu có lỗi gì các bạn hãy để lại nhận xét dưới comment !