Cách chèn FontAwesome không bị PageSpeed Insights cảnh báo

Chèn link font-awesome.min.css theo cách thông thường vẫn được hầu hết các trang web sử dụng vì nó không làm ảnh hưởng đến thời gian tải trang bao nhiêu. Tuy nhiên khi bạn sử dụng trang PageSpeed Insightsbạn kiểm tra trang web sẽ bị cảnh báo với lỗi chặn hiển thị. Và để 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.

Hướng dẫn chèn FontAwesome trực tiếp trong Blog

Cách 1: Chèn trong thẻ <b:skin>⋯</b:skin>

Copy

<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 trực tiếp trong <style type='text/css'>⋯</style>

Copy

<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[ */

Copy

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

Xem thêm: Cách chèn biểu tượng FontAwesome sử dụng thuộc tính "content" trong css

Với cách chèn này, bạn cũng làm tương tự với font Material Icon, ví dụ:

Copy

<b:skin ><![CDATA[




/* Material Icon */

@font-face {

  font-family: 'Material Icons';

  font-style: normal;

  font-weight: 400;

  src: local('Material Icons'), local('MaterialIcons-Regular'), url(//fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(//fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(//fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');

}

.material-icons {font-family: 'Material Icons';font-weight:normal;font-style:normal;font-size:inherit;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;vertical-align:middle;

/* Support for all WebKit browsers. */

-webkit-font-smoothing: antialiased;

/* Support for Safari and Chrome. */

text-rendering: optimizeLegibility;

/* Support for Firefox. */

-moz-osx-font-smoothing: grayscale;

/* Support for IE. */

font-feature-settings: 'liga';

}




]]></b:skin>

Nội dung chính