ถามเรื่องการฝัง Symbol fonts หน่อยคะ ตรง Follow us ปูแกะโค้ดเค้า เค้าก็ใช้วิธีฝังฟอนต์ แล้ว

<style>
@font-face {
	font-family: 'icomoon';
	src: url('http://www.mykronoz.com/wp-content/themes/roots/assets/fonts/icomoon.eot');
	src: url('http://www.mykronoz.com/wp-content/themes/roots/assets/fonts/icomoon.eot?#iefix') format('embedded-opentype'),  url('http://www.mykronoz.com/wp-content/themes/roots/assets/fonts/icomoon.woff') format('woff'),  url('http://www.mykronoz.com/wp-content/themes/roots/assets/fonts/icomoon.ttf') format('truetype'),  url('http://www.mykronoz.com/wp-content/themes/roots/assets/fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
	font-family: 'icomoon';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-facebook, .icon-twitter, .icon-google-plus, .icon-instagram, .icon-youtube, .icon-vimeo, .icon-flickr, .icon-picassa, .icon-dribbble, .icon-github, .icon-tumblr, .icon-blogger, .icon-wordpress, .icon-amazon, .icon-pinterest, .icon-lastfm, .icon-linkedin, .icon-soundcloud, .icon-yahoo, .icon-deviantart, .icon-forrst, .icon-foursquare, .icon-paypal, .icon-skype, .icon-link, .icon-phone, .icon-mail, .icon-location, .icon-wikipedia {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.icon-facebook:before {
	content: "\e000";
}
.icon-twitter:before {
	content: "\e001";
}
.icon-google-plus:before {
	content: "\e002";
}
.icon-instagram:before {
	content: "\e003";
}
.icon-youtube:before {
	content: "\e004";
}
.icon-vimeo:before {
	content: "\e005";
}
.icon-flickr:before {
	content: "\e006";
}
.icon-picassa:before {
	content: "\e007";
}
.icon-dribbble:before {
	content: "\e008";
}
.icon-github:before {
	content: "\e009";
}
.icon-tumblr:before {
	content: "\e00a";
}
.icon-blogger:before {
	content: "\e00b";
}
.icon-wordpress:before {
	content: "\e00c";
}
.icon-amazon:before {
	content: "\e00d";
}
.icon-pinterest:before {
	content: "\e00e";
}
.icon-lastfm:before {
	content: "\e00f";
}
.icon-linkedin:before {
	content: "\e010";
}
.icon-soundcloud:before {
	content: "\e011";
}
.icon-yahoo:before {
	content: "\e012";
}
.icon-deviantart:before {
	content: "\e013";
}
.icon-forrst:before {
	content: "\e014";
}
.icon-foursquare:before {
	content: "\e015";
}
.icon-paypal:before {
	content: "\e016";
}
.icon-skype:before {
	content: "\e017";
}
.icon-link:before {
	content: "\e018";
}
.icon-phone:before {
	content: "\e019";
}
.icon-mail:before {
	content: "\e01a";
}
.icon-location:before {
	content: "\e01b";
}
.icon-wikipedia:before {
	content: "\e01c";
}


ul {
	font-size: 1.7em;
    line-height: 1.7em;
    padding: 10px 0;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
}
ul.inline, ol.inline {
    list-style: none outside none;
    margin-left: 0;
}
ul.unstyled, ol.unstyled {
    list-style: none outside none;
    margin-left: 0;
}
ul, ol {
    margin: 0 0 10px 25px;
    padding: 0;
}
li:first-child {
    margin-left: 0;
    padding-left: 0;
}
li {
    margin: 0px;
    padding: 0;
    text-align: left;
    width: 30px;
}
ul.inline > li, ol.inline > li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}
a {
    transition: all 0.5s ease 0s;
	color: #E10617;
    outline: 0 none;
    text-decoration: none;
}
a:hover{
	color: #A10617;
    transition: all 0.5s ease 0s;
}
</style>

<ul class="unstyled inline">
  <li><a target="_blank" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','http://www.facebook.com']);" href="https://www.facebook.com/mykronoz"><span aria-hidden="true" class="icon-facebook"> </span></a></li>
  <li><a target="_blank" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','http://twitter.com']);" href="https://twitter.com/mykronoz"><span aria-hidden="true" class="icon-twitter"> </span></a></li>
  <li><a target="_blank" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','http://plus.google.com']);" href="https://plus.google.com/113384424446165177166/about"><span aria-hidden="true" class="icon-google-plus"> </span></a></li>
  <li><a target="_blank" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','http://www.youtube.com']);" href="http://www.youtube.com/user/mykronozofficial"><span aria-hidden="true" class="icon-youtube"> </span></a></li>
  <li><a target="_blank" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','http://pinterest.com']);" href="http://pinterest.com/mykronoz/boards/"><span aria-hidden="true" class="icon-pinterest"> </span></a></li>
  <li><a target="_blank" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','http://instagram.com']);" href="http://instagram.com/mykronoz "><span aria-hidden="true" class="icon-instagram"> </span></a></li>
</ul>

<i class='ใส่ class icon ที่ต้องการ'></i>

font-family: icomoon;
src: url(fonts/icomoon.eot?#iefix) format("embedded-opentype"), url(fonts/icomoon.woff) format("woff"), url(fonts/icomoon.ttf) format("truetype"), url(fonts/icomoon.svg#icomoon) format("svg");
font-weight: normal;
font-style: normal;
}