I'm doing a layout and trying IcoMoon for the icons of social networks. I created my repository, downloaded it and implemented it but when loading the page it shows a character error instead of the expected icon, I was trying to debug it but without success.
I leave the code that I used:
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?rtaxuw');
src: url('fonts/icomoon.eot?rtaxuw#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?rtaxuw') format('truetype'),
url('fonts/icomoon.woff?rtaxuw') format('woff'),
url('fonts/icomoon.svg?rtaxuw#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-twitter:before {
content: "\f099";
}
.icon-facebook:before {
content: "\f09a";
}
.icon-facebook-f:before {
content: "\f09a";
}
.icon-github:before {
content: "\f09b";
}
.icon-linkedin:before {
content: "\f0e1";
}<head>
<meta name="description" content="Wordpress theme Global">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wordpress Theme</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/icomoon/style.css">
</head>
<body>
<header>
<div id="top_header">
<div id="logo"><a href="#"><img src="img/log.png"></a></div>
<div class="no_show_responsive">
<div id="social">
<ul>
<li><a href="http://facebook.com/" ><span class="icon-linkedin"></span></a></li>
<li><a class="tw" href="http://twitter.com/"><img src="img/tw.png" ></a></li>
<li><a class="gl" href="http://google.com/"><img src="img/gl.png"></a></li>
</ul>
</div>