1

Estoy creando elementos esctrucuturales de la pagina y me iria genial hacerlo con Iconos Fuente, pero no puedo hacer que ocupe el 100% de la pantalla,¿Es posible conseguir que un Icon Font ocupe el 100% de la pantalla?

//EDITADO- Pero nose como enlazar los iconos de Icomoon, por lo que no se veran//

.icon-Fachada-PC {
  width: 100%;
  height: 80px;
  background-color: pink;
}

.icon-Fachada-PC:before {
  font-family: 'icomoon'; 
  content:"\e911";
  color: red;
  font-size: 100%;
  }
  <div class="icon-Fachada-PC"></div>

3
  • ¿Puedes añadir tu HTML y tu CSS?
    – Kiko_L
    Commented el 17 ene. 2019 a las 10:41
  • De dónde sacas el font-family icomoon?
    – Riaven
    Commented el 17 ene. 2019 a las 16:20
  • Es un font- family que creado yo mismo con iconos personalizados, nose como ni si puedo isertarlo aqui para que lo veáis. ¿Se puede hacer? SIno eso creo que no es relevante, cualquier fuente yo creo que serviria, al fin y al cabo todo son fuentes. Commented el 18 ene. 2019 a las 9:39

1 respuesta 1

1

Para darle el Tamaño fuente a cualquier icono de cualquier librería debes usar la Propiedad font-size y no width.

Para que un Icono abarque el 100% de todo el viewport width y el viewport height (Alto y Ancho) no es posible, si usas `font-size: 100%, solo se abarcara el 100% el cual es el tamaño original del icono que vinculas.

Debes de darle un tamaño establecido en pixeles para notar un cambio de aumento. o si considera el tamaño que asigne en % serian valores muy elevados como font-size: 5000%;

Lo que sí puedes hacer es darle una class o id a la etiqueta donde esta tu icono y con esa clase o id darle un width y height pero solo pa que ocupe toda la pantalla general no para su tamaño.

Te dejo un ejemplo:

En este caso usaremos los Iconos de Fontastic que permiten su uso con la CDN desde la nube.

Puedes usar cualquier fuente de iconos como el que mencionas icomoon, o fontawesome, ionicons, etc.

/* RESET DE PÁGINA RETIRANDO MARGIN Y PADDING */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  background: red;
  width: 100%;
  height: 100vh; /* Para que siempre ocupe todo la altura disponible viewport height*/
}

.container .tamaño {
  display: flex; /* FLEXBOX */
  justify-content: center; /* Centrar Horizontalmente */
  align-items: center; /* Centrar Verticalmente*/
  font-size: 400px; /* Tamaño del icono a aumentar en % o PX*/
  background: purple;
  max-width: 100%;/* siempre ocupe el tamaño maximo de la pantalla*/
  height: 100vh; /* Siempre ocupe todo su Alto según la pantalla*/
}
<!DOCTYPE html>
<html lang="es">

<head>
    <title>Icons</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- ICONOS DE FONTASTIC -->
    <link href="https://file.myfontastic.com/oZe3x9Y5SCuFb3PzfzgxRj/icons.css" rel="stylesheet">
</head>

<body>
    <main class="container">
        <i class="icon-smile-o tamaño"></i>
    </main>
</body>

</html>

Como puedes ver el nombre .tamaño es la clase que le di a la etiqueta i donde esta el icono de Fontastic y con la cual manejo sus estilos.

De esta forma puedes darle un tamaño total que desee, y con font-size el tamaño preferiblemente en pixeles, rem, em que es lo mas frecuente en los iconos.

Espero sea de utilidad.

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.