Si abres el fichero que enlazas podrás ver que el contenido es éste:
@charset "UTF-8";
/* cssdesdecero */
@font-face {
font-family: "cssdesdecero";
src:url("https://file.myfontastic.com/H3XXN7wMjz3R3tuYbzimaZ/fonts/1529835407.eot");
src:url("https://file.myfontastic.com/H3XXN7wMjz3R3tuYbzimaZ/fonts/1529835407.eot?#iefix") format("embedded-opentype"),
url("https://file.myfontastic.com/H3XXN7wMjz3R3tuYbzimaZ/fonts/1529835407.woff") format("woff"),
url("https://file.myfontastic.com/H3XXN7wMjz3R3tuYbzimaZ/fonts/1529835407.ttf") format("truetype"),
url("https://file.myfontastic.com/H3XXN7wMjz3R3tuYbzimaZ/fonts/1529835407.svg#1529835407") format("svg");
font-weight: normal;
font-style: normal;
}
[data-icon]:before {
font-family: "cssdesdecero" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "cssdesdecero" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-icon-facebook:before {
content: "\61";
}
.icon-icon-twitter:before {
content: "\62";
}
.icon-icon-youtube:before {
content: "\63";
}
Esto lo que hace es importar fuentes con iconos, indicar que los elementos que tenga el data-atributo data-icon
o que tengan alguna clase que empiece con icon-
deben usar esas fuentes. Y finalmente, se especifican los iconos para algunos casos especiales: facebook, twitter y youtube, que deberán tener las clases icon-icon-facebook
, icon-icon-twitter
e icon-icon-youtube
respectivamente.
Y ahí es donde está el problema. En tu código estás usando las clases icon-facebook
, icon-twitter
e icon-youtube
pero, quizás por algún error del sistema o por alguna entrada manual incorrecta, las clases "válidas" tienen icon-icon
.
Si cambias eso en tu código, ya se ven los iconos:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://file.myfontastic.com/H3XXN7wMjz3R3tuYbzimaZ/icons.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!--Menu Container-->
<nav class="main-nav">
<!--Redes sociales-->
<div class="social-network">
<a class="icon-icon-facebook" href="https://facebook.com"></a>
<a class="icon-icon-twitter" href="https://twiter.com"></a>
<a class="icon-icon-youtube" href="https://youtube.com"></a>
<a class="icon-icon-linkedin" href="https://linkedin.com"></a>
</div>
</nav>
</body>
</html>