1

Estoy usando Sass y en la página de Fontastic agregué 6 iconos para que se incrusten en la página pero no aparecen. ¿Por qué sucede eso y cómo puedo solucionarlo?

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

        <!--Redes sociales-->
        <div class="social-network">

            <a class="icon-facebook" href="https://facebook.com"></a>
            <a class="icon-twitter" href="https://twiter.com"></a>
            <a class="icon-youtube" href="https://youtube.com"></a>
            <a class="icon-linkedin" href="https://linkedin.com"></a>

        </div>

  </body>
</html>

8

1 respuesta 1

1

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.